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

64
src/components/sections/EVSection.tsx
View File

@@ -1073,11 +1073,11 @@ export default function EVSection({
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
justify-content: center;
justify-content: flex-start;
text-align: center;
padding: 12px 24px;
padding: 16px 20px;
box-sizing: border-box;
}
.evnd__bar-item:not(:last-child)::after {
content: '';
@@ -1089,27 +1089,42 @@ export default function EVSection({
background: rgba(255, 255, 255, 0.08);
}
.evnd__bar-val {
color: #ef4444 !important;
font-weight: 800;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
}
.evnd__bar-label {
color: #fff !important;
font-size: 14px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
opacity: 0.9;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 36px;
text-align: center;
line-height: 1.25;
width: 100%;
}
.evnd__bar-val {
color: #ef4444 !important;
font-weight: 800;
font-size: clamp(30px, 3.8vw, 52px);
line-height: 1.15;
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
margin-top: 8px;
width: 100%;
}
/* Non-numeric bar values (EVStat.text) — the bar's numeric clamp()
(up to 56px) is too large for words/phrases; size down and let
longer phrases (e.g. "Cost + Distance + SLA") wrap cleanly. */
.evnd__bar-val--text {
font-size: clamp(16px, 1.8vw, 22px);
font-size: clamp(15px, 2vw, 22px);
line-height: 1.25;
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
}
@keyframes evndGlow { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }
@@ -1157,20 +1172,27 @@ export default function EVSection({
}
.evnd__bar {
grid-template-columns: repeat(2, 1fr);
gap: 24px 0;
gap: 0;
width: calc(100% - 8px);
max-width: calc(100% - 8px);
margin: 32px auto 0;
padding: 24px 0;
margin: 28px auto 0;
padding: 12px 0;
box-sizing: border-box;
}
.evnd.evnd--cards {
padding-bottom: 20px;
margin-bottom: 0;
}
.evnd__bar-item:nth-child(even)::after { display: none; }
.evnd__bar-item:nth-child(2)::after { display: none; }
.evnd__bar-item { padding: 12px 16px; }
.evnd__bar-item {
padding: 16px 12px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.evnd__bar-item::after { display: none !important; }
.evnd__bar-item:nth-child(even) { border-right: none; }
.evnd__bar-item:nth-child(n+3) { border-bottom: none; }
.evnd__bar-label { min-height: 32px; font-size: 12.5px; }
.evnd__bar-val--text { font-size: clamp(14px, 3.8vw, 18px); }
/* ---- Scene overlay cleanup (mobile) ----
Keep only the primary top-left KPI badge; the second (bottom-right)
@@ -1248,10 +1270,10 @@ export default function EVSection({
@media (max-width: 480px) {
.evnd { padding: 40px 16px 48px; }
.evnd { padding-inline: 0; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 0; }
.evnd__bar-item { padding: 10px 12px; gap: 8px; }
.evnd__bar-val { font-size: clamp(26px, 9vw, 34px); }
.evnd__bar-label { font-size: 12.5px; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 8px 0; }
.evnd__bar-item { padding: 14px 10px; }
.evnd__bar-val { font-size: clamp(22px, 7vw, 30px); }
.evnd__bar-label { font-size: 12px; min-height: 32px; }
/* feature cards (homepage): tighter, no overflow, more room for text */
.evnd-feature {