Fix cramped card title when commit grid is wide#75
Merged
Conversation
Add FitOrHide React component that uses ResizeObserver to detect when the header-info container overflows. When metrics (commit grid + diff stats) don't fit alongside the title and buttons, they're hidden entirely rather than partially clipping. Structure: wrap dot + title + metrics in a .header-info flex container with overflow:hidden. Buttons remain outside so they're always visible. The title gets min-width:80px to stay readable.
FitOrHide now takes a list of items and progressively hides them from first (lowest priority) to last (highest priority). The commit grid is hidden first since it's wider; diff stats (+/-) stay visible longer since they're compact and informative. Extract commitGridElement and diffStatsElement helpers shared by both workMetricsView (archive card) and workMetricsItems (FitOrHide).
The commit grid now hides earlier, giving the branch name more visible characters before truncation kicks in.
Tests now use .commit-grid selector instead of .work-metrics (removed), and check DOM attachment instead of visibility since FitOrHide may hide overflow items in narrow viewports.
Extract relativeTime, FitOrHide, workMetricsView, and workMetricsItems into Components.fs. ArchiveViews.fs now contains only archive-specific code (Msg, update, archiveCard, archiveSection). Add module-cohesion review rule to catch code placed in unrelated modules.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When a worktree has many commits, the commit grid visualization and diff stats (
+1735 -660) consume all horizontal space in the card header, causing the branch name to shrink until it completely disappears — showing only "de..." or "embedd..." instead of a readable title.Fix
Add a
FitOrHideReact component that uses aResizeObserverto detect when the card header overflows, and progressively hides metrics that don't fit.Structural change: wrap the status dot + branch name + metrics in a
.header-infoflex container withoverflow: hidden. Buttons remain outside so they're always top-right.Progressive hiding:
FitOrHidetakes a list of items ordered by priority (lowest first). When the parent overflows, items are hidden from first to last:+/- counts) hidden last (compact, stays visible longer)min-width: 100pxKey details:
FitOrHideusesResizeObserveron the parent element to re-check on resizeuseEffectto handle content changesHtml.none→ no second row or empty wrappersChanges
ArchiveViews.fs— addFitOrHidecomponent with ResizeObserver interop, extractcommitGridElement/diffStatsElementhelpers, addworkMetricsItemsfor progressive hidingApp.fs— wrap dot + title +FitOrHide(metrics)in.header-infodiv in both card typesindex.html— add.header-info,.fit-or-hide,.fit-or-hide > spanCSS rules; set.branch-namemin-width: 100pxinside header-info