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

   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);
     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;
+  }
+}