Преглед изворни кода

Fix totals row sticky offset double-counting the control bar height

The totals row reserved space for the fixed control bar twice: once as
an explicit position:sticky bottom offset, and again via padding-bottom
on the scrolling ancestor (body on desktop, .sheet-container on mobile).
Chromium didn't visibly double-count these, but reported cross-browser
testing showed a persistent gap above the control bar consistent with
exactly this.

Moves the reserved padding from body to html (the actual scrolling
element on desktop) and changes the totals row's sticky offset to
bottom: 0, so the clearance is only ever accounted for once per
breakpoint.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TGk94jbWGvBsQmnQXFeksz
Brandon Wong пре 1 недеља
родитељ
комит
37d33fb730
1 измењених фајлова са 14 додато и 4 уклоњено
  1. 14 4
      frontend/resources/public/site.css

+ 14 - 4
frontend/resources/public/site.css

@@ -2,11 +2,17 @@
   --control-bar-height: 44px;
 }
 
+/* html (not body) is the actual scrolling element on desktop, so the
+   reserved space for the fixed control bar belongs on it: that's the
+   ancestor position:sticky measures its offsets against. */
+html {
+  padding-bottom: var(--control-bar-height);
+}
+
 body {
   font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
   max-width: 600px;
   margin: 0;
-  padding-bottom: var(--control-bar-height);
   -webkit-font-smoothing: antialiased;
   font-size: 1.125em;
   color: #333;
@@ -19,7 +25,7 @@ body {
   html, body {
     height: 100%;
     overflow: hidden;
-    padding-bottom: 0;
+    padding-bottom: 0; /* .sheet-container becomes the scrolling ancestor instead; see below */
   }
   #app {
     height: 100%;
@@ -103,11 +109,15 @@ td, th {
     z-index: 2;
 }
 
-/* Totals row: pinned to the bottom of the viewport, just above the control bar */
+/* Totals row: pinned to the bottom of the viewport, just above the control bar.
+   bottom:0 rests it flush against the scrolling ancestor's own reserved
+   padding-bottom (html on desktop, .sheet-container on mobile) - deliberately
+   not an explicit --control-bar-height offset here, so the space is only
+   ever accounted for once. */
 #main-table .totals-row th,
 #main-table .totals-row td {
     position: sticky;
-    bottom: var(--control-bar-height);
+    bottom: 0;
     z-index: 1;
     background: #e8edf5;
     border-top: 2px solid #333;