hazem/yslootahrobotics
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile configurator panel flows in-page so Proceed button is reachable
Some checks are pending
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source 
On mobile the configurator was a 100vh frame with an inner scrolling
bottom-sheet embedded inside the scrolling /configure page. Page scroll
hijacked the gesture and skipped the frame, trapping the Proceed to Order
and Reset buttons in the inner scroll. Drop the nested scroll on <=768px:
canvas stays fixed on top, the full config panel flows in normal page
scroll so the CTAs are always visible. Landscape side-by-side preserved.

Also pin outputFileTracingRoot to the project dir to silence the
multiple-lockfile workspace-root warning.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Najjar\NajjarV02 2026-06-02 10:35:24 +04:00
parent e500fee42f
commit 60e1ea8407
2 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
next.config.mjs
View File

@ -1,6 +1,12 @@
import { fileURLToPath } from 'node:url';
import { dirname } from 'node:path';
const __dirname = dirname(fileURLToPath(import.meta.url));
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
output: 'standalone', output: 'standalone',
outputFileTracingRoot: __dirname,
images: { images: {
unoptimized: true, unoptimized: true,
}, },

77
src/app/globals.css
View File

@ -602,77 +602,60 @@ html {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
/* Embedded in a scrolling page: drop the nested-scroll bottom-sheet.
Canvas on top (fixed height), full config panel flows below in normal
page scroll so Proceed to Order / Reset are always reachable. */
#configurator { height: auto !important; min-height: 0 !important; }
.layout-container { .layout-container {
flex-direction: column-reverse !important; flex-direction: column !important;
height: 100dvh !important; height: auto !important;
overflow: visible !important;
}
.canvas-area {
height: 48dvh !important;
max-height: 48dvh !important;
min-height: 260px !important;
width: 100% !important;
flex: none !important;
} }
.glass-panel-responsive { .glass-panel-responsive {
order: unset !important; order: unset !important;
position: relative !important; position: relative !important;
bottom: auto !important; inset: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important; width: 100% !important;
height: 55dvh !important; height: auto !important;
max-height: 55dvh !important; max-height: none !important;
border-right: none !important; border-right: none !important;
border-left: none !important; border-left: none !important;
border-top: 1px solid var(--color-border) !important; border-top: 1px solid var(--color-border) !important;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.06) !important; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.06) !important;
border-radius: 1rem 1rem 0 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 50;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.glass-panel-responsive.panel-expanded {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100dvh !important;
max-height: 100dvh !important;
border-radius: 0 !important; border-radius: 0 !important;
border-top: none !important; overflow: visible !important;
box-shadow: none !important; z-index: 1;
z-index: 200 !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 0 !important;
} }
.canvas-area { .mobile-handle { display: none !important; }
height: 45dvh !important;
max-height: 45dvh !important;
min-height: 180px !important;
width: 100% !important;
flex: none !important;
}
#configurator { height: 100dvh !important; }
.mobile-handle { display: flex !important; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.glass-panel-responsive {
height: 58dvh !important;
max-height: 58dvh !important;
border-radius: 0.75rem 0.75rem 0 0 !important;
}
.canvas-area { .canvas-area {
height: 42dvh !important; height: 44dvh !important;
max-height: 42dvh !important; max-height: 44dvh !important;
min-height: 160px !important; min-height: 240px !important;
} }
.glass-panel-responsive header { padding: 0.75rem 1rem !important; } .glass-panel-responsive header { padding: 0.75rem 1rem !important; }
.glass-panel-responsive > div[role="region"] { padding: 1rem !important; } .glass-panel-responsive > div[role="region"] {
padding: 1.1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
}
} }
@media (max-width: 375px) { @media (max-width: 375px) {
.glass-panel-responsive { height: 60dvh !important; max-height: 60dvh !important; } .canvas-area { height: 42dvh !important; max-height: 42dvh !important; min-height: 220px !important; }
.canvas-area { height: 40dvh !important; max-height: 40dvh !important; min-height: 140px !important; }
} }
@media (max-height: 500px) and (orientation: landscape) { @media (max-height: 500px) and (orientation: landscape) {
.layout-container { flex-direction: row !important; } #configurator { height: 100dvh !important; }
.layout-container { flex-direction: row !important; height: 100dvh !important; overflow: hidden !important; }
.glass-panel-responsive { .glass-panel-responsive {
order: unset !important; order: unset !important;
position: relative !important; position: relative !important;