Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix mobile screen view issue

Browse Source
This commit is contained in:
Aravind
2026-08-03 11:27:21 +05:30
parent 6e3f49bb94
commit 65ea0640f8
5 changed files with 117 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/sections/SolutionsWorkflow.tsx
View File

@@ -3634,6 +3634,8 @@ div#sw-root section#quantum p.sw-lede,
#sw-root .sw-split, #sw-root .sw-split--reverse { grid-template-columns: 1fr; gap: 32px; }
#sw-root .sw-split--reverse .sw-mt-canvas-col { order: -1; }
#sw-root .sw-veh-stage { order: -1; }
#sw-root .sw-dash-body { grid-template-columns: 1fr; }
#sw-root .sw-dash-panel--wide, #sw-root .sw-dash-panel--fleet { grid-column: span 1 !important; }
}
@media (max-width: 767px) {
#sw-root { margin-bottom: 24px; --sw-in-pad: 16px; }
@@ -3641,9 +3643,18 @@ div#sw-root section#quantum p.sw-lede,
#sw-root .sw-panel, #sw-root .sw-edge, #sw-root .sw-ade, #sw-root .sw-veh-stage, #sw-root .sw-bg { border-radius: 20px; }
#sw-root .sw-panel { padding: 16px; }
#sw-root .sw-ade { padding: 16px; }
#sw-root .sw-dash-kpis, #sw-root .sw-veh-row { gap: 10px; }
#sw-root .sw-dash-body { grid-template-columns: 1fr; }
#sw-root .sw-dash-panel--wide { grid-column: span 1; }
#sw-root .sw-dash { overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
#sw-root .sw-dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
#sw-root .sw-kpi-tile { padding: 12px 14px; gap: 4px; }
#sw-root .sw-kpi-val { font-size: clamp(18px, 4.5vw, 24px); }
#sw-root .sw-kpi-label { font-size: 11px; }
#sw-root .sw-dash-body { grid-template-columns: 1fr !important; gap: 12px; }
#sw-root .sw-dash-panel, #sw-root .sw-dash-panel--wide, #sw-root .sw-dash-panel--fleet { grid-column: span 1 !important; padding: 16px 14px; gap: 14px; max-width: 100%; box-sizing: border-box; overflow: hidden; }
#sw-root .sw-bars { gap: 6px; max-width: 100%; }
#sw-root .sw-fleet-row { grid-template-columns: 8px 1fr auto auto; gap: 6px; font-size: 11.5px; }
#sw-root .sw-fleet-id, #sw-root .sw-fleet-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sw-root .sw-fleet-eta { white-space: nowrap; }
#sw-root .sw-feed-row { font-size: 12px; padding: 8px 10px; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sw-root .sw-h { font-size: clamp(26px, 8vw, 34px) !important; }
#sw-root .sw-lede { max-width: none; }
/* The map fills via object-fit:cover, so the phone can keep realistic
@@ -3654,6 +3665,13 @@ div#sw-root section#quantum p.sw-lede,
@media (max-width: 640px) {
#sw-root .sw-mt-canvas { height: clamp(300px, 62vw, 380px); }
}
@media (max-width: 480px) {
#sw-root .sw-dash-chrome { flex-wrap: wrap; gap: 6px; padding-bottom: 12px; margin-bottom: 16px; }
#sw-root .sw-dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
#sw-root .sw-kpi-tile { padding: 10px 12px; }
#sw-root .sw-ring-wrap { width: 108px; height: 108px; }
#sw-root .sw-heat { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
#sw-root .sw-jnode-hero-ring, #sw-root .sw-livedot, #sw-root .sw-phone-badge-dot, #sw-root .sw-ade-livedot { animation: none !important; }
}