Button consistency sweep + mobile responsiveness patches

- Standardize modal dismiss/cancel buttons to btn-outline-secondary across 70+ views - Remove btn-sm from page-level Create and Back buttons (Index + Detail pages) - Fix Edit buttons on Details pages: btn-secondary -> btn-warning - Fix form Cancel/Back links: btn-secondary -> btn-outline-secondary - Add 10 CSS patches to site.css for mobile/tablet responsiveness: top-navbar overflow prevention, page-header flex-wrap at 575px, table action button min-height override, notification dropdown width cap, tablet content padding Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-10 19:04:10 -04:00
parent 328b195127
commit e2f9e9ae4f
71 changed files with 553 additions and 422 deletions
@@ -1020,4 +1020,135 @@ a.tag-index-badge:hover {
 .mw-xs { max-width: 280px; }
 .mw-sm { max-width: 360px; }
 .mw-md { max-width: 480px; }
+
+/* =============================================================
+   MOBILE / TABLET RESPONSIVENESS — Phase 2 patches
+   ============================================================= */
+
+/* ── 1. Top-navbar: prevent left-side from overflowing on phone ──────────
+   The navbar left side is: hamburger + icon + h1.page-title + company badge.
+   On narrow phones (<576px) this row is ~340px of content in ~330px space.
+   Fix: let the page-title shrink and truncate; hide company badge.          */
+@media (max-width: 575.98px) {
+  .top-navbar {
+    padding: 0.625rem 0.75rem;
+    gap: 0.35rem;
+  }
+  /* Allow left cluster to shrink — prevents pushing user-menu off-screen */
+  .top-navbar > .d-flex:first-child {
+    min-width: 0;
+    flex: 1 1 0;
+    gap: 0.35rem;
+  }
+  .page-title {
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    max-width: 40vw;
+  }
+  /* Company badge in top-navbar adds width without adding value on phone — hide it */
+  .top-navbar .badge.bg-primary {
+    display: none !important;
+  }
+}
+
+/* ── 2. Content area: flex children need min-width:0 to allow shrinking ──
+   Without this, h4/h5 inside a flex container can't shrink below their
+   natural content width, blowing the container past the viewport edge.      */
+.d-flex > h4,
+.d-flex > h5 {
+  min-width: 0;
+}
+
+/* ── 3. Page-header rows: let title stack above action buttons on phone ──
+   The near-universal pattern is:
+     d-flex justify-content-between align-items-center mb-3 / mb-4
+   Adding flex-wrap lets the h4 take line 1, buttons wrap to line 2.
+   The mb-3/mb-4 specificity ensures we only hit block-level separators,
+   not inline rows or filter bars.                                           */
+@media (max-width: 575.98px) {
+  .d-flex.justify-content-between.align-items-center.mb-3,
+  .d-flex.justify-content-between.align-items-center.mb-4,
+  .d-flex.align-items-center.justify-content-between.mb-3,
+  .d-flex.align-items-center.justify-content-between.mb-4 {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}
+
+/* ── 4. Card headers: let title + card-level actions wrap on phone ────────
+   Card headers use the same justify-content-between pattern.                */
+@media (max-width: 575.98px) {
+  .card-header .d-flex.justify-content-between,
+  .card-header .d-flex.align-items-center.gap-2 {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .card-header h5 {
+    min-width: 0;
+    flex-shrink: 1;
+  }
+}
+
+/* ── 5. Details page top button bars: wrap instead of overflow ────────────
+   Pattern: d-flex justify-content-end gap-2 mb-4 (Download PDF, Back, Edit…) */
+@media (max-width: 575.98px) {
+  .d-flex.justify-content-end.gap-2.mb-4,
+  .d-flex.gap-2.justify-content-end.mb-4 {
+    flex-wrap: wrap;
+  }
+}
+
+/* ── 6. Alert filter banners: wrap action button below text on phone ──────
+   Pattern: alert d-flex justify-content-between align-items-center           */
+@media (max-width: 575.98px) {
+  .alert.d-flex.justify-content-between.align-items-center,
+  .alert.d-flex.align-items-center.justify-content-between {
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+}
+
+/* ── 7. Table row buttons: exempt from the global 44px touch-target floor ─
+   The global rule (.btn, .btn-sm { min-height: 44px }) is right for form
+   buttons, but forces table rows to ~50px tall on mobile — too bloated.
+   Buttons inside .table and inside .btn-group-sm stay compact.              */
+@media (max-width: 768px) {
+  .table .btn,
+  .table .btn-sm,
+  .btn-group-sm > .btn {
+    min-height: unset !important;
+    padding: 0.25rem 0.5rem !important;
+    font-size: 0.8rem !important;
+  }
+}
+
+/* ── 8. Notification dropdown: prevent overflow on narrow phones ──────────
+   Fixed width: 360px clips content on 360px phones.                         */
+@media (max-width: 575.98px) {
+  .notif-dropdown {
+    width: calc(100vw - 2rem) !important;
+    min-width: unset !important;
+  }
+}
+
+/* ── 9. Search inputs in card/page headers: remove enforced min-width ─────
+   Several views set style="min-width:200px" inline on the input-group.
+   This is fine on tablets but breaks layout on <400px phones.               */
+@media (max-width: 400px) {
+  .card-header .input-group,
+  .input-group[style*="min-width"] {
+    min-width: unset !important;
+  }
+}
+
+/* ── 10. Tablet (768px): tighten content area padding ─────────────────────
+   2rem padding on both sides = 64px wasted on a 768px screen. Use 1.25rem. */
+@media (min-width: 577px) and (max-width: 991px) {
+  .content-area {
+    padding: 1.25rem;
+  }
+}
 .mw-lg { max-width: 640px; }