Merge pull request #152 from jobstash/fix/layout-shift

fixing layout shift on grants detail page
jobstash · Oct 22, 2024 · de501e7 · de501e7
2 parents 9b159e4 + f2c56ed
commit de501e7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 11 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -31,7 +31,7 @@ interface RootLayoutProps {
 const RootLayout: React.FC<RootLayoutProps> = ({ children }) => (
   <html
     lang="en"
-    className={`bg-[#070708] ${interTight.variable} ${grotesk.variable}`}
+    className={`overflow-x-hidden bg-[#070708] ${interTight.variable} ${grotesk.variable}`}
   >
     <body className={inter.className}>
       <NextUIProvider>

diff --git a/src/grants/components/grant-card/client-wrapper.tsx b/src/grants/components/grant-card/client-wrapper.tsx
@@ -15,7 +15,7 @@ export const ClientWrapper = ({ backButton, collapsed, full }: Props) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const sentinelRef = useRef<HTMLDivElement>(null);
   const fixedDivRef = useRef<HTMLDivElement>(null);
-  const [paddingBottom, setPaddingBottom] = useState<number>(440);
+  const [paddingBottom, setPaddingBottom] = useState<number>(0);
 
   useEffect(() => {
     const currentRef = sentinelRef.current;
@@ -26,7 +26,7 @@ export const ClientWrapper = ({ backButton, collapsed, full }: Props) => {
         setIsCollapsed(!entry.isIntersecting);
       },
       {
-        rootMargin: '50px 0px 0px 0px',
+        rootMargin: '30px 0px 0px 0px',
         threshold: 0,
       },
     );
@@ -46,18 +46,19 @@ export const ClientWrapper = ({ backButton, collapsed, full }: Props) => {
       if (fixedDivRef.current) {
         const height = fixedDivRef.current?.offsetHeight || 0;
         setPaddingBottom(height);
+        fixedDivRef.current.classList.add('fixed', 'inset-x-0', 'top-0', 'z-50', 'lg:ml-[264px]');
       }
     };
 
     const handleResize = () => {
       clearTimeout(resizeTimeout); // Clear the previous timeout
       resizeTimeout = setTimeout(() => {
         updatePaddingBottom();
-      }, 100); // Adjust the debounce delay as needed (200ms in this case)
+      }, 20); // Adjust the debounce delay as needed (200ms in this case)
     };
 
     // Initial calculation
-    setTimeout(updatePaddingBottom, 200); 
+    setTimeout(updatePaddingBottom, 20); 
 
     // Attach the debounced resize event listener
     window.addEventListener('resize', handleResize);
@@ -75,7 +76,7 @@ export const ClientWrapper = ({ backButton, collapsed, full }: Props) => {
       <div ref={sentinelRef} className="absolute left-0 top-0 h-1 w-full"></div>
       <div
         ref={fixedDivRef}
-        className="fixed inset-x-0 top-0 z-50 mt-[56px] bg-app-bg md:mt-20 lg:ml-[264px] lg:mr-8 lg:mt-0 lg:rounded-b-20"
+        className="mt-[56px] bg-app-bg md:mt-20  lg:mr-8 lg:mt-0 lg:rounded-b-20"
       >
         <div className="flex items-center px-5 lg:h-[115px] lg:px-0">
           {backButton}

diff --git a/src/grants/pages/grant-page-layout/grant-page-layout.tsx b/src/grants/pages/grant-page-layout/grant-page-layout.tsx
@@ -28,10 +28,8 @@ export const GrantPageLayout = ({ list, grant, children }: Props) => {
       />
 
       <div className="lg:pr-8">
-        <div className="px-2 pb-4 text-base">Grantee List</div>
         <div className="flex gap-8">
           <div className="w-full shrink-0 lg:w-4/12">{list}</div>
-
           <ScrollTriggerContainer>{children}</ScrollTriggerContainer>
         </div>
       </div>

diff --git a/src/grants/pages/grant-page-layout/scroll-trigger-container.tsx b/src/grants/pages/grant-page-layout/scroll-trigger-container.tsx
@@ -68,9 +68,7 @@ export const ScrollTriggerContainer = ({ children }: Props) => {
 
   return (
     <div ref={pinRef} className="flex w-full flex-col gap-4">
-      <div className="absolute left-auto right-0 mx-6 -mr-8 -mt-20  hidden h-20 w-[calc(100vw-264px)] flex-col bg-app-bg text-base lg:block">
-        <span className='absolute bottom-0 left-0 pb-2 pl-8'>Grantee List</span>
-      </div>
+
       <div ref={isDesktop ? contentRef : undefined}>{children}</div>
     </div>
   );