Skip to content

Commit 597cd8b

Browse files
OliTamratOliTamrat
committed
Revert all overflow-x-hidden additions that broke mobile layout
Removed ALL overflow-x-hidden from html, body, globals.css, and page wrapper divs. These additions caused layout conflicts on iOS Safari where overflow-x-hidden on nested elements creates broken scroll behavior. Restored StationTable to original min-w-[700px] with overflow-x-auto. Removed Leaflet z-index:0 override. Kept only the original overflow-x-hidden on <main> tags which was the working pattern before the overflow changes.
1 parent fd597c4 commit 597cd8b

11 files changed

Lines changed: 16 additions & 22 deletions

File tree

‎src/app/about/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function AboutPage() {
3232
const textClass = `text-sm leading-relaxed ${isDark ? "text-[#E5E7EB]" : "text-[#4B5563]"}`;
3333

3434
return (
35-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
35+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
3636
<Sidebar />
3737
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
3838
<Header />

‎src/app/education/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ export default function EducationPage() {
321321
}
322322

323323
return (
324-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
324+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
325325
<Sidebar />
326326
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
327327
<Header />

‎src/app/globals.css‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,7 @@
4141
--color-accent-teal: #2DD4BF;
4242
}
4343

44-
/* ── Base Typography & Overflow Prevention ── */
45-
html, body {
46-
overflow-x: hidden;
47-
max-width: 100vw;
48-
}
49-
44+
/* ── Base Typography ── */
5045
body {
5146
font-family: 'Inter', system-ui, -apple-system, sans-serif;
5247
-webkit-font-smoothing: antialiased;
@@ -249,9 +244,8 @@ html.light .metric-card:hover {
249244
animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
250245
}
251246

252-
/* Contain Leaflet map within its parent — prevent overflow and z-index conflicts */
247+
/* Leaflet map containment */
253248
.leaflet-container {
254-
z-index: 0;
255249
position: relative;
256250
}
257251

‎src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default function RootLayout({
6464
children: React.ReactNode;
6565
}) {
6666
return (
67-
<html lang="en" className="dark overflow-x-hidden">
67+
<html lang="en" className="dark">
6868
<head>
6969
<meta name="viewport" content="width=device-width, initial-scale=1" />
7070
{/* Preconnect to external origins for faster loading */}
@@ -82,7 +82,7 @@ export default function RootLayout({
8282
rel="stylesheet"
8383
/>
8484
</head>
85-
<body className="antialiased transition-colors duration-300 overflow-x-hidden">
85+
<body className="antialiased transition-colors duration-300">
8686
{/* Skip-to-content link for keyboard/screen reader users (WCAG 2.1 AA §2.4.1) */}
8787
<a
8888
href="#main-content"

‎src/app/methodology/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default function MethodologyPage() {
143143
}, [fetchLogs]);
144144

145145
return (
146-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
146+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
147147
<Sidebar />
148148
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
149149
<Header />

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function Dashboard() {
5757
}, []);
5858

5959
return (
60-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
60+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
6161
<Sidebar />
6262
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
6363
<Header />

‎src/app/research/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function ResearchPage() {
6060
});
6161

6262
return (
63-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
63+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
6464
<Sidebar />
6565
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
6666
<Header />

‎src/app/scenarios/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export default function ScenariosPage() {
147147
const availableStations = currentFrame?.stations || [];
148148

149149
return (
150-
<div className={`flex min-h-screen overflow-x-hidden ${isDark ? "bg-udc-dark text-white" : "bg-[#F9FAFB] text-[#111827]"}`}>
150+
<div className={`flex min-h-screen ${isDark ? "bg-udc-dark text-white" : "bg-[#F9FAFB] text-[#111827]"}`}>
151151
<Sidebar />
152152
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
153153
<Header />

‎src/app/station/[id]/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ export default function StationDetailPage() {
238238

239239
if (loading) {
240240
return (
241-
<div className={`flex min-h-screen overflow-x-hidden ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
241+
<div className={`flex min-h-screen ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
242242
<Sidebar />
243243
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
244244
<Header />
@@ -252,7 +252,7 @@ export default function StationDetailPage() {
252252

253253
if (notFound || !station) {
254254
return (
255-
<div className={`flex min-h-screen overflow-x-hidden ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
255+
<div className={`flex min-h-screen ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
256256
<Sidebar />
257257
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
258258
<Header />
@@ -299,7 +299,7 @@ export default function StationDetailPage() {
299299
const hasEAVData = latestMeasurements.length > 0;
300300

301301
return (
302-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
302+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
303303
<Sidebar />
304304
<main className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
305305
<Header />

‎src/app/stories/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function StoriesPage() {
2424
const sidebarClass = useSidebarClass();
2525

2626
return (
27-
<div className={`flex min-h-screen overflow-x-hidden transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
27+
<div className={`flex min-h-screen transition-colors duration-300 ${isDark ? "bg-udc-dark" : "bg-[#F9FAFB]"}`}>
2828
<Sidebar />
2929
<main id="main-content" className={`flex-1 ${sidebarClass} min-w-0 overflow-x-hidden`}>
3030
<Header />

0 commit comments

Comments
 (0)