Pin the header and title bar to the viewport while a wide table scrolls

On a wide index table the whole page scrolls horizontally. Pin #header and
#title_bar to the viewport's left edge and cap them to the viewport width, so
the logo, nav, page title AND action buttons all stay visible while the table
scrolls underneath (no `top`, so they still scroll vertically). #titlebar_right
resets to static — the bar does the pinning now, not the buttons.

Width is min(100vw - var(--scrollbar-width), 100%): plain 100vw includes the
vertical scrollbar gutter and shifts the left-pinned bars at the far-right
scroll position. The optional wigu/scrollbar_width.js sets --scrollbar-width;
without it the var falls back to 0 (plain 100vw). Consuming apps each solved
this with their own CSS (scroll_buttons_init.scss, title_bar overrides) and JS
— this owns it for all of them.

Author: Fivell

app/assets/javascripts/wigu/scrollbar_width.js

@@ -0,0 +1,23 @@
+// Expose the vertical scrollbar width as a CSS custom property
+// (--scrollbar-width) on <html>. The sticky #header and #title_bar are pinned to
+// the viewport's left edge and sized with 100vw, but 100vw INCLUDES the vertical
+// scrollbar gutter — so when a page has a vertical scrollbar the bars are ~15px
+// wider than the visible viewport and, clamped inside their full-content-width
+// containing block, get pushed left by that amount at the far-right horizontal
+// scroll position. Subtracting this variable (0 when there is no scrollbar) sizes
+// them to the visible viewport instead, so they stay put. Optional: the CSS falls
+// back to `var(--scrollbar-width, 0px)` = plain 100vw when this script is absent.
+(function () {
+  function update() {
+    var w = window.innerWidth - document.documentElement.clientWidth;
+    document.documentElement.style.setProperty("--scrollbar-width", (w > 0 ? w : 0) + "px");
+  }
+  window.addEventListener("resize", update);
+  document.addEventListener("DOMContentLoaded", function () {
+    update();
+    // The presence of a vertical scrollbar can change after load (content grows/
+    // shrinks) without firing resize — watch the body's box too.
+    if (window.ResizeObserver) { new ResizeObserver(update).observe(document.body); }
+  });
+  update();
+})();

app/assets/stylesheets/wigu/active_admin_theme.scss

@@ -463,7 +463,12 @@ body.active_admin {
     // wrapped menu.
     position: sticky;
     left: 0;
-    width: 100vw;
+    // Viewport width minus the vertical scrollbar (JS-set --scrollbar-width var,
+    // 0 when absent — load wigu/scrollbar_width), capped to the content width.
+    // Plain 100vw includes the scrollbar gutter, which shifts this left-pinned
+    // bar at the far-right scroll position; subtracting it keeps it put. unquote
+    // so Sass emits the min() literally (it can't mix % + vw).
+    width: unquote("min(calc(100vw - var(--scrollbar-width, 0px)), 100%)");
     box-sizing: border-box;
     h1.site_title {
       color: $skinMainSecondColor;
@@ -657,11 +662,37 @@ body.active_admin {
     background-color: $skinTitleBarColor;
     border: none;
     border-bottom: $skinTitleBarBorderWidth solid $skinTitleBarBorderColor;
+    // Pin the whole bar to the viewport like #header, so the title AND the
+    // action buttons stay visible while a wide index table scrolls the page
+    // sideways. width = the viewport (minus the vertical scrollbar via the
+    // JS-set --scrollbar-width var, 0 when absent — load wigu/scrollbar_width to
+    // populate it), capped to the content width so 100vw's scrollbar allowance
+    // can't add a stray horizontal scrollbar. No `top`, so it still scrolls
+    // vertically. unquote so Sass emits the min() literally (it can't mix % + vw).
+    position: sticky;
+    left: 0;
+    width: unquote("min(calc(100vw - var(--scrollbar-width, 0px)), 100%)");
+    box-sizing: border-box;
+    // Lay the title (left) and action items (right) on one compact row. Without
+    // this, resetting #titlebar_right to static (below) stacks it under the
+    // title and the bar grows tall. Fixed height so pages with a breadcrumb
+    // (detail pages) match plain index pages. Drop the base clearfix — in a flex
+    // container it becomes a stray third item that space-between strands right.
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 37px;
+    &::after { display: none; }
     #titlebar_left {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      height: auto;
       span.breadcrumb {
         font-size: 12px;
         text-shadow: none;
-        margin-bottom: 8px;
+        float: none;
+        margin-bottom: 0;
         a, span {
           color: lighten( $skinMainFirstColor, 30% )!important; ;
         }
@@ -672,6 +703,16 @@ body.active_admin {
       }
     }
     #titlebar_right {
+      // Horizontal pinning is handled by #title_bar (sticky + viewport width),
+      // so the action items just sit at the right of the bar. Reset any
+      // consumer `position: absolute/sticky` (each app used to pin the buttons
+      // itself via a local scroll_buttons_init.scss / title_bar override).
+      position: static;
+      right: auto;
+      top: auto;
+      // Shrink to the action-items height (some apps/base leave it ~50px, taller
+      // than the 37px bar, so centering pushed it over the top edge).
+      height: auto;
       // `> a` and `> .dropdown_menu > a`: an action item may hold a dropdown, and
       // a descendant selector here paints its menu entries with the button fill
       // too — with !important, so the entry rules below cannot undo it.

img/titlebar-scroll-after.png

@@ -0,0 +1,31 @@
+# Demo page with a table wider than the viewport, so the page scrolls
+# horizontally — used to show the header + title bar (title on the left, the
+# action button on the right) staying pinned while the table scrolls under them.
+ActiveAdmin.register_page "Wide table" do
+  menu priority: 4
+
+  action_item(:new_record) { link_to "New record", "#" }
+
+  WIDE_COLS = (1..12).map { |i| "Column #{i}" }.freeze
+  WIDE_ROWS = (1..5).map { |r| (1..12).map { |c| "row #{r} / value #{c}" } }.freeze
+
+  content do
+    # nowrap + a min cell width so the 12 columns push the table past the
+    # viewport and the page scrolls sideways (what the sticky bars are for).
+    text_node <<~HTML.html_safe
+      <style>#wrapper .wide-demo td, #wrapper .wide-demo th {
+        white-space: nowrap; min-width: 150px;
+      }</style>
+    HTML
+    panel "A table wider than the viewport" do
+      head = "<thead><tr>" + WIDE_COLS.map { |c| "<th>#{c}</th>" }.join + "</tr></thead>"
+      body = WIDE_ROWS.map do |row|
+        "<tr>" + row.map { |cell| "<td>#{ERB::Util.html_escape(cell)}</td>" }.join + "</tr>"
+      end.join
+      text_node(
+        (%(<table class="index_table wide-demo">) + head + "<tbody>" + body + "</tbody></table>")
+          .html_safe
+      )
+    end
+  end
+end

img/titlebar-scroll-before.png

@@ -3,3 +3,4 @@
 //= require wigu/server_clock
 //= require wigu/theme_toggle
 //= require wigu/table_crisscross
+//= require wigu/scrollbar_width