From ae5a9286712a408ece0df37e63bce6724c47893f Mon Sep 17 00:00:00 2001 From: prathiyuman Date: Mon, 13 Jul 2026 16:52:41 +0530 Subject: [PATCH] Eliminate extra vertical stretching inside vitals cards by applying align-content start and setting fixed 56px heights --- .../fiveparaminte-main/static/dashboard.html | 26 +++++++++++-------- fiveparaminte-main/static/dashboard.html | 26 +++++++++++-------- static/dashboard.html | 26 +++++++++++-------- 3 files changed, 45 insertions(+), 33 deletions(-) diff --git a/fiveparaminte-main/fiveparaminte-main/static/dashboard.html b/fiveparaminte-main/fiveparaminte-main/static/dashboard.html index c370a3d..aa380d4 100644 --- a/fiveparaminte-main/fiveparaminte-main/static/dashboard.html +++ b/fiveparaminte-main/fiveparaminte-main/static/dashboard.html @@ -94,11 +94,13 @@ z-index: 1; max-width: 1400px; margin: 0 auto; - padding: 24px; + padding: 12px; min-height: 100vh; display: flex; flex-direction: column; + justify-content: flex-start; width: 100%; + box-sizing: border-box; } /* === Header === */ @@ -386,14 +388,14 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; - flex: 1; + align-content: start; } .vital-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; - padding: 6px 10px; + padding: 8px 12px; position: relative; overflow: hidden; box-shadow: @@ -402,10 +404,12 @@ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: grid; grid-template-areas: "header value waveform"; - grid-template-columns: 85px 65px 1fr; - grid-template-rows: 32px; + grid-template-columns: 90px 70px 1fr; + grid-template-rows: 40px; align-items: center; - gap: 0 8px; + gap: 0 10px; + height: 56px; + box-sizing: border-box; } .vital-card:hover { @@ -524,7 +528,7 @@ .vital-value { font-family: 'JetBrains Mono', monospace; - font-size: 24px; + font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; @@ -539,13 +543,13 @@ .vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); } .vital-value.no-data { - font-size: 18px; + font-size: 22px; color: var(--text-dim) !important; text-shadow: none !important; } .vital-value .unit { - font-size: 10px; + font-size: 11px; font-weight: 500; letter-spacing: 0; margin-left: 2px; @@ -554,7 +558,7 @@ } .vital-value .slash { - font-size: 18px; + font-size: 22px; opacity: 0.3; margin: 0; color: var(--text-secondary); @@ -573,7 +577,7 @@ /* === Waveform Canvas === */ .waveform-container { grid-area: waveform; - height: 32px; + height: 40px; position: relative; z-index: 1; overflow: hidden; diff --git a/fiveparaminte-main/static/dashboard.html b/fiveparaminte-main/static/dashboard.html index c370a3d..aa380d4 100644 --- a/fiveparaminte-main/static/dashboard.html +++ b/fiveparaminte-main/static/dashboard.html @@ -94,11 +94,13 @@ z-index: 1; max-width: 1400px; margin: 0 auto; - padding: 24px; + padding: 12px; min-height: 100vh; display: flex; flex-direction: column; + justify-content: flex-start; width: 100%; + box-sizing: border-box; } /* === Header === */ @@ -386,14 +388,14 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; - flex: 1; + align-content: start; } .vital-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; - padding: 6px 10px; + padding: 8px 12px; position: relative; overflow: hidden; box-shadow: @@ -402,10 +404,12 @@ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: grid; grid-template-areas: "header value waveform"; - grid-template-columns: 85px 65px 1fr; - grid-template-rows: 32px; + grid-template-columns: 90px 70px 1fr; + grid-template-rows: 40px; align-items: center; - gap: 0 8px; + gap: 0 10px; + height: 56px; + box-sizing: border-box; } .vital-card:hover { @@ -524,7 +528,7 @@ .vital-value { font-family: 'JetBrains Mono', monospace; - font-size: 24px; + font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; @@ -539,13 +543,13 @@ .vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); } .vital-value.no-data { - font-size: 18px; + font-size: 22px; color: var(--text-dim) !important; text-shadow: none !important; } .vital-value .unit { - font-size: 10px; + font-size: 11px; font-weight: 500; letter-spacing: 0; margin-left: 2px; @@ -554,7 +558,7 @@ } .vital-value .slash { - font-size: 18px; + font-size: 22px; opacity: 0.3; margin: 0; color: var(--text-secondary); @@ -573,7 +577,7 @@ /* === Waveform Canvas === */ .waveform-container { grid-area: waveform; - height: 32px; + height: 40px; position: relative; z-index: 1; overflow: hidden; diff --git a/static/dashboard.html b/static/dashboard.html index c370a3d..aa380d4 100644 --- a/static/dashboard.html +++ b/static/dashboard.html @@ -94,11 +94,13 @@ z-index: 1; max-width: 1400px; margin: 0 auto; - padding: 24px; + padding: 12px; min-height: 100vh; display: flex; flex-direction: column; + justify-content: flex-start; width: 100%; + box-sizing: border-box; } /* === Header === */ @@ -386,14 +388,14 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; - flex: 1; + align-content: start; } .vital-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; - padding: 6px 10px; + padding: 8px 12px; position: relative; overflow: hidden; box-shadow: @@ -402,10 +404,12 @@ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: grid; grid-template-areas: "header value waveform"; - grid-template-columns: 85px 65px 1fr; - grid-template-rows: 32px; + grid-template-columns: 90px 70px 1fr; + grid-template-rows: 40px; align-items: center; - gap: 0 8px; + gap: 0 10px; + height: 56px; + box-sizing: border-box; } .vital-card:hover { @@ -524,7 +528,7 @@ .vital-value { font-family: 'JetBrains Mono', monospace; - font-size: 24px; + font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; @@ -539,13 +543,13 @@ .vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); } .vital-value.no-data { - font-size: 18px; + font-size: 22px; color: var(--text-dim) !important; text-shadow: none !important; } .vital-value .unit { - font-size: 10px; + font-size: 11px; font-weight: 500; letter-spacing: 0; margin-left: 2px; @@ -554,7 +558,7 @@ } .vital-value .slash { - font-size: 18px; + font-size: 22px; opacity: 0.3; margin: 0; color: var(--text-secondary); @@ -573,7 +577,7 @@ /* === Waveform Canvas === */ .waveform-container { grid-area: waveform; - height: 32px; + height: 40px; position: relative; z-index: 1; overflow: hidden;