hanna/fabrica

style(web): fix mobile dashboard/repo-nav overflow and truncate repo paths

e750afc · hanna committed on 2026-07-26

- Dashboard/profile/issue columns kept their side-by-side align-items
  (e.g. .dashboard's flex-start) when the mobile query stacked them to a
  column, so the main column shrank to its content and overflowed the
  viewport. Reset align-items: stretch and give the main columns
  width:100%/min-width:0 when stacked.
- Repo sub-nav stacked into a tall column with the branch/clone actions
  crowding it. On mobile the tab strip now scrolls horizontally
  (flex-wrap: nowrap) on its own row with the actions on the row below.
- Long repo/group paths in listing cards now truncate with an ellipsis
  instead of pushing past the card width; trailing visibility/archived
  badges stay put.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +32 −2

@@ @@ -1465,6 +1465,19 @@ label.checkbox input { @@
   align-items: center;
   gap: 0.45rem;
   font-weight: 600;
   max-width: 100%;
+}
 /* Truncate a long repo/group path so it never pushes past the card width; the
    trailing visibility/archived badges stay put (they are not the name span). */
 .repo-row-name > span:not(.badge) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+}
 .repo-row-name > .icon,
 .repo-row-name > .badge {
   flex: none;
+}
 .repo-row-name .icon {
   color: var(--fb-fg-muted);
@@ @@ -2531,24 +2544,41 @@ td.diff-empty { @@
     justify-content: center;
     min-width: 44px;
+  }
   /* Stack the repo sub-nav: the tab strip scrolls horizontally on its own row
      (rather than wrapping into a tall column), with the branch/clone actions
      on the row below instead of crowding the tabs. */
   .repo-nav {
     flex-direction: column;
     align-items: stretch;
+  }
   .repo-tabs {
     flex-wrap: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+  }
   .repo-tabs a {
     flex: 0 0 auto;
+  }
   /* Diff tables scroll within their own box (the blob wrapper already does). */
   table.diff {
     display: block;
     overflow-x: auto;
+  }
   /* Stack the profile, dashboard, and issue columns on narrow screens. */
   /* Stack the profile, dashboard, and issue columns on narrow screens. The
      containers use align-items other than stretch when side-by-side, so reset
      it here or the main column shrinks to its content and overflows. */
   .profile-layout,
   .dashboard,
   .issue-main {
     flex-direction: column;
     align-items: stretch;
+  }
   .profile-sidebar,
   .dashboard-side,
   .issue-side {
   .issue-side,
   .profile-main,
   .dashboard-main {
     width: 100%;
     min-width: 0;
+  }
+}