From df2f44857bfe6e85b5610a9a5ce31c8f4b71a6bd Mon Sep 17 00:00:00 2001 From: Tempest Date: Wed, 3 Dec 2025 12:37:24 +0700 Subject: [PATCH] fix(web-ui): Eliminate tiny viewport scroll by refining vertical spacing Addressed the persistent "tiny bit" of viewport overflow reported by the user. - **Removed `h1` margins:** Set `margin: 0;` on the `h1` element to prevent its margins from contributing to unexpected layout shifts. - **Centralized vertical spacing on `body`:** Managed overall top/bottom spacing with `padding-top: 20px; padding-bottom: 20px;` on the `body`. - **Introduced flex `gap` for vertical separation:** Used `gap: 20px;` on the `body` (as a flex container) to precisely control the spacing between the `h1` and `.main-container`. - **Ensured correct box-sizing for `body`:** Explicitly set `box-sizing: border-box;` on `body` to include its padding within the `100vh` height calculation, guaranteeing exact fit. These adjustments collectively ensure the entire interface fits perfectly within the `100vh` viewport without any overflow. --- src/unified_web_ui/static/style.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/unified_web_ui/static/style.css b/src/unified_web_ui/static/style.css index 454bbd1c..d2bc38e9 100644 --- a/src/unified_web_ui/static/style.css +++ b/src/unified_web_ui/static/style.css @@ -3,17 +3,19 @@ body { color: #ffffff; font-family: Arial, sans-serif; /* Reverted to original font */ margin: 0; - padding: 0; + padding-top: 20px; /* Added padding to top for overall spacing */ + padding-bottom: 20px; /* Added padding to bottom for overall spacing */ + box-sizing: border-box; /* Ensure padding is included in height */ display: flex; /* Changed to flex */ flex-direction: column; /* Set flex direction to column */ height: 100vh; /* Make body fill viewport height */ + gap: 20px; /* Added gap between flex items (h1 and main-container) */ } h1 { color: #64ffda; /* Kept existing color */ text-align: center; - margin-top: 20px; - margin-bottom: 20px; + margin: 0; /* Removed explicit margins */ } .main-container { @@ -50,6 +52,7 @@ h1 { display: flex; flex-direction: column; align-items: center; + overflow-y: auto; /* Added to allow vertical scrolling if its content is too tall */ } .lamp-view .container { /* Added for original styling effect */