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

@@ -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: 0; /* Removed explicit margins */
-    margin-bottom: 20px;
 }
 
 .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 */