diff --git a/app/globals.css b/app/globals.css index ab30a0c..7438c38 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,7 +1,6 @@ :root { --bg-1: #f8f2e6; --bg-2: #dce9f4; - --card: #fff9f0; --panel: #f9f8f3; --panel-line: #d8d1c4; --ink: #1f2633; @@ -9,7 +8,9 @@ --primary: #0a5f94; --primary-press: #084d79; --disabled: #9fa9b8; - --controls-height: 10dvh; + --controls-height: 10svh; + --controls-safe: env(safe-area-inset-bottom); + --controls-total-height: calc(var(--controls-height) + var(--controls-safe)); } * { @@ -32,15 +33,16 @@ body { } .home-layout { - height: 100dvh; + position: relative; + height: 100svh; width: 100%; padding: 1rem; - padding-bottom: calc(var(--controls-height) + 1rem); + padding-bottom: calc(var(--controls-total-height) + 1rem); + overflow: hidden; } .website-zone { - height: calc(100dvh - var(--controls-height) - 1rem); - max-height: 90dvh; + height: 100%; min-height: 0; } @@ -97,9 +99,9 @@ body { left: 0; right: 0; bottom: 0; - height: var(--controls-height); + height: var(--controls-total-height); padding: 0.5rem 1rem; - padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); + padding-bottom: calc(0.5rem + var(--controls-safe)); border-top: 1px solid rgba(28, 41, 62, 0.16); background: linear-gradient(180deg, rgba(255, 250, 242, 0.95), rgba(239, 235, 225, 0.98)); backdrop-filter: blur(7px); @@ -119,6 +121,9 @@ body { margin: 0; color: var(--muted); font-size: clamp(0.8rem, 2.2vw, 1rem); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .radio-controls__buttons { @@ -163,11 +168,7 @@ body { @media (max-width: 560px) { .home-layout { padding: 0.65rem; - padding-bottom: calc(var(--controls-height) + 0.65rem); - } - - .website-zone { - height: calc(100dvh - var(--controls-height) - 0.65rem); + padding-bottom: calc(var(--controls-total-height) + 0.65rem); } .radio-controls-wrap { @@ -176,11 +177,11 @@ body { } .radio-controls { - grid-template-columns: 1fr; - gap: 0.35rem; + grid-template-columns: minmax(0, 1fr) auto; + gap: 0.5rem; } .radio-controls__buttons { - justify-content: start; + justify-content: end; } }