From d4fe36ea773b0278264d971286e3b629e5ce23f6 Mon Sep 17 00:00:00 2001 From: phanendraguptha Date: Sun, 19 Mar 2023 17:31:26 +0530 Subject: [PATCH 1/2] fix: ui elements shifting to the right --- src/components/Search.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index cac28bc942f..62300677d40 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -7,7 +7,7 @@ import {IconSearch} from 'components/Icon/IconSearch'; import Head from 'next/head'; import Link from 'next/link'; import Router from 'next/router'; -import {useState, useCallback, useEffect} from 'react'; +import {useState, useCallback, useEffect, useLayoutEffect} from 'react'; import * as React from 'react'; import {createPortal} from 'react-dom'; import {siteConfig} from 'siteConfig'; @@ -108,6 +108,15 @@ export function Search({ }: SearchProps) { const [isShowing, setIsShowing] = useState(false); + useLayoutEffect(() => { + const scrollBarWidth = window.innerWidth - document.body.clientWidth; + if (isShowing) { + document.body.style.marginRight = `${scrollBarWidth}px`; + } else if (!isShowing) { + document.body.style.marginRight = '0px'; + } + }, [isShowing]); + const importDocSearchModalIfNeeded = useCallback( function importDocSearchModalIfNeeded() { if (DocSearchModal) { From b620b59ba6789f0fc84f208bb75627d900b7ffd6 Mon Sep 17 00:00:00 2001 From: phanendraguptha Date: Sun, 19 Mar 2023 17:57:21 +0530 Subject: [PATCH 2/2] chore: formated code --- src/components/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 62300677d40..ff8b142f196 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -108,7 +108,7 @@ export function Search({ }: SearchProps) { const [isShowing, setIsShowing] = useState(false); - useLayoutEffect(() => { + useLayoutEffect(() => { const scrollBarWidth = window.innerWidth - document.body.clientWidth; if (isShowing) { document.body.style.marginRight = `${scrollBarWidth}px`;