fix: mobile view clipping on Samsung S24 Ultra and similar devices

Antaris · Antaris · commit 0e7c30b5bb06 · 2026-02-26T16:28:28.000Z
- Add viewport-fit=cover and safe-area insets for curved/notched edges
- Add responsive --page-padding (16px on screens ≤480px)
- Fix footer nav wrapping with flex-wrap and reduced mobile gap
- Apply safe-area-aware padding to Navbar and Footer
- Add overflow-x: hidden to prevent horizontal scroll

Made-with: Cursor
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#33AAFF" />
     <title>Ingenium Software Engineering | .NET, React & Azure Development</title>
     <meta name="description" content="Ingenium Software Engineering delivers software development, architecture and infrastructure solutions. Specialists in .NET, React and Azure." />
diff --git a/src/components/layout/Footer.module.css b/src/components/layout/Footer.module.css
@@ -1,7 +1,7 @@
 .footer {
   background: var(--color-gray-900);
   border-top: 1px solid var(--border-subtle);
-  padding: var(--space-12) var(--page-padding);
+  padding: var(--space-12) max(var(--page-padding), var(--safe-area-inset-right)) max(var(--space-12), var(--safe-area-inset-bottom)) max(var(--page-padding), var(--safe-area-inset-left));
   color: rgba(255, 255, 255, 0.85);
 }
 
@@ -39,6 +39,8 @@
 
 .nav {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-6);
 }
 
@@ -60,8 +62,14 @@
 }
 
 @media (max-width: 600px) {
+  .footer {
+    padding: var(--space-8) max(var(--space-4), var(--safe-area-inset-right)) max(var(--space-8), var(--safe-area-inset-bottom)) max(var(--space-4), var(--safe-area-inset-left));
+  }
   .content {
     flex-direction: column;
     text-align: center;
   }
+  .nav {
+    gap: var(--space-3);
+  }
 }
diff --git a/src/components/layout/Navbar.module.css b/src/components/layout/Navbar.module.css
@@ -7,7 +7,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-4) var(--page-padding);
+  padding-block: max(var(--space-4), var(--safe-area-inset-top)) var(--space-4);
+  padding-inline: max(var(--page-padding), var(--safe-area-inset-left)) max(var(--page-padding), var(--safe-area-inset-right));
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -100,7 +101,7 @@
     flex-direction: column;
     align-items: stretch;
     gap: 0;
-    padding: var(--space-2) 0;
+    padding: var(--space-2) max(var(--page-padding), var(--safe-area-inset-right)) var(--space-2) max(var(--page-padding), var(--safe-area-inset-left));
     background: var(--surface-0);
     border-bottom: 1px solid var(--border-subtle);
     box-shadow: var(--floating-shadow);
@@ -116,7 +117,7 @@
     opacity: 1;
   }
   .navLink {
-    padding: var(--space-4) var(--page-padding);
+    padding: var(--space-4) max(var(--page-padding), var(--safe-area-inset-right)) var(--space-4) max(var(--page-padding), var(--safe-area-inset-left));
     font-size: var(--font-size-md);
     border-bottom: 1px solid var(--border-subtle);
   }
@@ -146,6 +147,7 @@
 
 @media (max-width: 600px) {
   .navbar {
-    padding: var(--space-3) var(--space-4);
+    padding-block: max(var(--space-3), var(--safe-area-inset-top)) var(--space-3);
+    padding-inline: max(var(--space-4), var(--safe-area-inset-left)) max(var(--space-4), var(--safe-area-inset-right));
   }
 }
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -10,10 +10,12 @@
 
 html {
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 body {
   margin: 0;
+  overflow-x: hidden;
   font-family: var(--font-sans);
   font-size: var(--font-size-body);
   font-weight: var(--font-weight-regular);
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
@@ -100,6 +100,10 @@
   --space-16: 64px;
 
   --page-padding: 24px;
+  --safe-area-inset-left: env(safe-area-inset-left, 0px);
+  --safe-area-inset-right: env(safe-area-inset-right, 0px);
+  --safe-area-inset-top: env(safe-area-inset-top, 0px);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
   --card-padding: 16px;
   --section-gap: 64px;
   --content-max-width: 1200px;
@@ -159,3 +163,9 @@
   --danger-bg: rgba(240, 68, 56, 0.18);
   --danger-fg: #FDA29B;
 }
+
+@media (max-width: 480px) {
+  :root {
+    --page-padding: 16px;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.footer {`
`2`	`2`	`background: var(--color-gray-900);`
`3`	`3`	`border-top: 1px solid var(--border-subtle);`
`4`		`- padding: var(--space-12) var(--page-padding);`
	`4`	`+ padding: var(--space-12) max(var(--page-padding), var(--safe-area-inset-right)) max(var(--space-12), var(--safe-area-inset-bottom)) max(var(--page-padding), var(--safe-area-inset-left));`
`5`	`5`	`color: rgba(255, 255, 255, 0.85);`
`6`	`6`	`}`
`7`	`7`
`@@ -39,6 +39,8 @@`
`39`	`39`
`40`	`40`	`.nav {`
`41`	`41`	`display: flex;`
	`42`	`+ flex-wrap: wrap;`
	`43`	`+ justify-content: center;`
`42`	`44`	`gap: var(--space-6);`
`43`	`45`	`}`
`44`	`46`
`@@ -60,8 +62,14 @@`
`60`	`62`	`}`
`61`	`63`
`62`	`64`	`@media (max-width: 600px) {`
	`65`	`+ .footer {`
	`66`	`+ padding: var(--space-8) max(var(--space-4), var(--safe-area-inset-right)) max(var(--space-8), var(--safe-area-inset-bottom)) max(var(--space-4), var(--safe-area-inset-left));`
	`67`	`+ }`
`63`	`68`	`.content {`
`64`	`69`	`flex-direction: column;`
`65`	`70`	`text-align: center;`
`66`	`71`	`}`
	`72`	`+ .nav {`
	`73`	`+ gap: var(--space-3);`
	`74`	`+ }`
`67`	`75`	`}`