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

feat: enhance responsive design for glass panel and configurator section
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Najjar\NajjarV02
2026-04-17 13:29:44 +04:00
parent 0793a650fb
commit b9444979f2
2 changed files with 164 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+145 -8
View File
@@ -200,22 +200,57 @@ html {
@media (max-width: 768px) {
.layout-container {
flex-direction: column !important;
flex-direction: column-reverse !important;
height: 100dvh !important;
}
.glass-panel-responsive {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
order: unset !important;
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
height: 50vh !important;
border-left: none !important;
height: 55dvh !important;
max-height: 55dvh !important;
border-right: none !important;
border-left: none !important;
border-top: 1px solid var(--color-border) !important;
box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.08) !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;
}
/* Expanded (fullscreen) state overrides */
.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-top: none !important;
box-shadow: none !important;
z-index: 200 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 0 !important;
}
.canvas-area {
height: 45dvh !important;
max-height: 45dvh !important;
min-height: 180px !important;
width: 100% !important;
flex: none !important;
}
#configurator {
height: 100dvh !important;
}
.mobile-handle {
@@ -223,6 +258,108 @@ html {
}
}
/* Small phones */
@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 {
height: 42dvh !important;
max-height: 42dvh !important;
min-height: 160px !important;
}
.glass-panel-responsive header {
padding: 0.75rem 1rem !important;
}
.glass-panel-responsive > div[role="region"] {
padding: 1rem !important;
}
}
/* Very small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
.glass-panel-responsive {
height: 60dvh !important;
max-height: 60dvh !important;
}
.canvas-area {
height: 40dvh !important;
max-height: 40dvh !important;
min-height: 140px !important;
}
}
/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
.layout-container {
flex-direction: row !important;
}
.glass-panel-responsive {
order: unset !important;
position: relative !important;
width: 320px !important;
min-width: 320px !important;
height: 100% !important;
max-height: 100% !important;
border-radius: 0 !important;
border-top: none !important;
border-left: 1px solid var(--color-border) !important;
overflow-y: auto !important;
}
.canvas-area {
height: 100% !important;
max-height: 100% !important;
width: auto !important;
flex: 1 !important;
}
.mobile-handle {
display: none !important;
}
}
.mobile-handle {
display: none;
}
/* Hide expand button on desktop */
.panel-expand-btn {
display: none !important;
}
/* Show expand button only on mobile */
@media (max-width: 768px) {
.panel-expand-btn {
display: flex !important;
}
/* Expanded (fullscreen) panel state – position handled by React inline styles */
.layout-expanded .canvas-area {
height: 0 !important;
max-height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
}
@media (max-width: 480px) {
.glass-panel-responsive.panel-expanded {
height: 100dvh !important;
max-height: 100dvh !important;
}
}
@media (max-width: 375px) {
.glass-panel-responsive.panel-expanded {
height: 100dvh !important;
max-height: 100dvh !important;
}
}