Refactor layout components for improved spacing and responsiveness

valebearzotti · valebearzotti · commit 1d45a81c2219 · 2025-04-02T11:08:45.000-03:00
- Adjusted header height and padding for better alignment on different screen sizes.
- Updated footer padding to enhance visual consistency.
- Modified main layout to prevent overflow and ensure proper content display.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -27,11 +27,11 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${funnelDisplay.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${funnelDisplay.variable} antialiased overflow-hidden`}
       >
         <Header />
         <main className="w-full h-auto mx-auto">
-          <div className="flex flex-col mx-auto relative justify-center items-center overflow-clip">
+          <div className="flex flex-col mx-auto relative justify-center items-center">
             {children}
           </div>
         </main>
diff --git a/src/components/hero/index.tsx b/src/components/hero/index.tsx
@@ -14,7 +14,7 @@ import { useEffect, useRef } from "react";
 import { Overlay } from "../overlay";
 
 const DESKTOP_HEIGHT = 256;
-const MOBILE_HEIGHT = 356;
+const MOBILE_HEIGHT = 260;
 
 const DESKTOP_CAMERA_POSITION = 2.3;
 const MOBILE_CAMERA_POSITION = 2.7;
@@ -246,7 +246,7 @@ void main() {
   }, []);
 
   return (
-    <div className="w-full overflow-clip h-[calc(100dvh-356px)] md:h-[calc(100dvh-256px)]">
+    <div className="w-full overflow-clip h-[calc(100dvh-260px)] md:h-[calc(100dvh-256px)]">
       <div
         ref={containerRef}
         className="w-[calc(100%-2rem)] mx-4 h-full overflow-clip"
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -5,15 +5,15 @@ import { Link } from "../link";
 export const Footer = () => {
   return (
     <div className="flex flex-col-reverse md:flex-row justify-between items-center m-4 dashed-top dashed-bottom after:hidden md:after:block md:h-[84px]">
-      <div className="flex items-center gap-4 dashed-right after:hidden lg:after:block h-full pl-2 lg:px-10 py-8 pb-4 md:py-0">
+      <div className="flex items-center gap-4 dashed-right after:hidden lg:after:block h-full md:pl-2 lg:px-10 py-4 pb-4 md:py-0">
         <span className="text-sm font-mono text-white">
           © {new Date().getFullYear()} All rights reserved.
         </span>
       </div>
       <div className="dashed-top md:hidden w-full"></div>
       <div className="dashed-right h-full lg:hidden"></div>
       <div className="flex items-center gap-8 dashed-left before:hidden lg:before:block h-full lg:px-10">
-        <div className="flex flex-col md:flex-row items-center gap-2 py-8 md:py-0">
+        <div className="flex flex-col md:flex-row items-center gap-2 py-4 md:py-0">
           <span className="text-white font-mono text-sm flex gap-4">
             <NextLink
               href="/"
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -5,7 +5,7 @@ import { Link } from "../link";
 
 export const Header = () => {
   return (
-    <div className="flex justify-between items-center m-4 mb-2 dashed-top dashed-bottom h-[108px]">
+    <div className="flex justify-between items-center m-4 mb-2 dashed-top dashed-bottom h-[72px] mx-2 md:h-[108px]">
       <NextLink
         href="/"
         className="flex items-center gap-4 dashed-right h-full px-8"
