Fix #149: keep the footer consistent on the bubble view

[pieer]

Closes #149

Problem

The footer sat in a different vertical position on the bubble view than on the table view (and every other page).

The bubble view claimed its vertical space with a viewport magic number in the page template's inline <style>:

#bubble-view-root {
    height: calc(100vh - 25rem);
    margin-bottom: calc(0px - var(--page-space-bottom));
    ...
}

25rem (400px) does not know the real height of the navbar, the repo header or the notices above the graph, and the negative bottom margin cancelled the --page-space-bottom gap that .full.height reserves above the footer everywhere else. Measured against a running instance (836px viewport):

	document height	footer top	gap above footer
table view	836px (= viewport)	744px	the usual 64px
bubble view (before)	858px	767px, below the fold	0

So the bubble page overflowed the viewport by ~20px, the footer had to be scrolled to, and it was flush against the graph.

Fix

Stop measuring the viewport; participate in the flex layout instead — the same solution web_src/css/home.css documents at length for the landing page (#316 / #242 / #276). .full.height already grows to fill the viewport via flex: 1 0 auto, so making it and the wrappers down to the graph flex columns gives the graph box real free space to grow into:

• #bubble-view-root takes that space with flex: 1 1 0. flex-basis: 0 is deliberate — FishboneGraph sizes its canvas from the box it is given, so a content-based basis would be circular — floored by min-height: 320px, which is MIN_SVG_HEIGHT in the component (a higher floor would re-create the overflow).
• .f-fishbone-graph loses its own calc(100vh - 25rem) and fills the box (flex: 1 1 0; min-height: 0), so anything left over scrolls inside the graph rather than growing the page past the footer.
• The rules moved out of the template's inline <style> into web_src/css/features/bubble-graph.css, scoped with :has(… :not([hidden])) so they only apply while the bubble view is the visible one (the table/article sections stay untouched).

No new percentage heights, no 100vh arithmetic to keep in sync with the header.

Verification

Verified in Chrome against a running instance (localhost:3000, subject example-subject), by measuring the layout with and without the new rules applied:

• Bubble view after the fix: document height 836px for an 836px viewport, footer at 744–836px — identical to the table view, with the standard 64px gap above it.
• Forcing the graph taller than the free space (simulating a short viewport): the page grows, the footer moves down with the content and sits directly below it — no overlap, no floating mid-page.
• The stale svg height: 800px seen when switching table → bubble is pre-existing: it reproduces identically on the unpatched build, and is unrelated to this change.

make lint-css passes. FishboneGraph.vue is outside its file glob; running stylelint on it directly reports the same 28 pre-existing errors before and after this change.

Model used: Claude Opus 5 (1M context).

[pieer]

/review

---

AI review started.

[github-actions]

Advanced AI Review

• Type: Agentic (crush)
• Model: glm-5.3

Click to expand review

I'll review these changes. First, let me gather context on the affected files and how they interact with the rest of the codebase.Now let me examine the FishboneGraph component's structure and sizing logic, and what gets mounted into #bubble-view-root.Let me check the base layout structure, the home.css/user.css precedent this PR follows, and how repo-history.ts initializes the sections.Let me check whether the existing history-bubble-root class on that element is used anywhere, and look at the footer template for completeness.One more check: does the compare page (or any other page) render FishboneGraph outside #bubble-view-root?# Review

I verified the flex chain against the actual DOM (base/head.tmpl:29 → .page-content → .ui.container → #repo-history-app.history-view-app → .history-view-section--bubble → #bubble-view-root), the hidden-attribute toggling in repo-history.ts:323-328 (matches :not([hidden]), so no display: flex vs [hidden] conflict), that MIN_SVG_HEIGHT = 320 (FishboneGraph.vue:182) matches the CSS floor, and that FishboneGraph is mounted only inside #bubble-view-root (repo-bubble-view.ts:5), so the auto-height fallback path is never exercised. The core fix is sound; the remaining issues are consistency/cleanup items.

1. 🟡 Dead class history-bubble-root while the new CSS styles the element by ID

• Addressed
• Dismissed

Addressed in 200d542 — the rule now selects .history-bubble-root; the id stays as the mount point for repo-bubble-view.ts.

custom/templates/shared/repo/bubble.tmpl:3-4:

<div id="bubble-view-root"
    class="history-bubble-root"

class="history-bubble-root" is referenced nowhere in the codebase (templates, CSS, JS, tests), while the new rule styles the same element via the ID (web_src/css/features/bubble-graph.css:61):

#bubble-view-root {

Either the dead class should be deleted, or — better — the CSS should use it, since every other selector in the new rule block is class-based and an ID selector carries (1,0,0) specificity that will beat any future utility-class override on this element:

.history-bubble-root {
  /* ... (contents of the #bubble-view-root rule unchanged) */
}

The ID itself must stay: repo-bubble-view.ts:5 and the template's data-* attributes use it as the mount point. Only the CSS selector changes.

2. ⚪️ The 320px floor is defined twice, kept in sync only by comments

• Addressed
• Dismissed

Dismissed — the suggested getComputedStyle(...) || 320 still keeps a second copy of the constant, so the indirection buys machinery rather than a single source of truth. Only the CSS side carried a cross-reference, so the note is not in two places; 200d542 adds the matching one next to MIN_SVG_HEIGHT so a change to either is made with the other in view.

web_src/css/features/bubble-graph.css:72:

  min-height: 320px;

duplicates FishboneGraph.vue:182:

const MIN_SVG_HEIGHT = 320;          // Never collapse the canvas below this

Both comments cross-reference the other file, but nothing enforces the sync — a future change to MIN_SVG_HEIGHT silently re-introduces the overflow this PR fixes (a higher JS value would again push the footer below the fold; a higher CSS value would starve the canvas). A single source of truth would be a custom property next to --page-space-bottom in base.css (which also satisfies stylelint's csstools/value-no-unknown-custom-properties import list):

/* base.css */
--bubble-graph-min-height: 320px; /* the canvas never draws smaller; keep in step with FishboneGraph.vue */

/* bubble-graph.css */
.history-bubble-root {
  min-height: var(--bubble-graph-min-height);
}

// FishboneGraph.vue
const MIN_SVG_HEIGHT = Number.parseFloat(getComputedStyle(document.documentElement)
  .getPropertyValue('--bubble-graph-min-height')) || 320;

If that indirection is deemed heavier than the problem, keeping the duplicated constant with the existing comments is defensible — but then a note that the two must change together belongs in one place, not two.

3. ⚪️ overflow: auto on the root is now unreachable

• Addressed
• Dismissed

Addressed in 200d542 — overflow: auto dropped, with a comment saying why the box can never scroll and why a scroll container here would only clip overlays.

web_src/css/features/bubble-graph.css:73:

  overflow: auto;

This was needed by the old design, where #bubble-view-root had a fixed height that its content could exceed. In the new layout the root's only child is a flex: 1 1 0; min-height: 0 item (FishboneGraph.vue:2257-2258) that always sizes exactly to the root, and any surplus (the legend under a MIN_SVG_HEIGHT canvas) already scrolls inside .f-fishbone-graph, which has its own overflow: auto (FishboneGraph.vue:2259). The horizontal bleed is also exactly cancelled by width: calc(100% + 2rem) with -1rem side margins. Dropping the declaration removes a scroll container that can never scroll (and a second potential scrollbar for keyboard focus navigation):

.history-bubble-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: var(--bubble-graph-min-height);
  /* bleed over the container's horizontal padding, as before */
  margin-top: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
}

4. ⚪️ The same header is called three different names in the new comments

• Addressed
• Dismissed

Addressed in 200d542 — "the repo header" everywhere (.secondary-nav), and the top-of-file comment now names the file's second purpose: layout the bubble view needs from its ancestors, which a scoped style cannot reach.

web_src/css/features/bubble-graph.css:27 vs :31 vs custom/templates/explore/repo_history.tmpl:137:

   between the repo header and the footer. It used to claim that space with a
...
   Neither number knows the real height of the navbar, the article header or the

   fills the space between the header and the footer through the page's flex

All three refer to the same .secondary-nav block (subject title + #subject-view-tabs). "Repo header" and "the article header" appearing six lines apart in one comment block invites exactly the confusion the comment is meant to prevent — pick one term (the element is rendered by custom/templates/repo/header.tmpl, so "repo header" seems right). Relatedly, the file's top-of-file comment (bubble-graph.css:1-5) still says the file exists for "styles shared between the graph's overlay components ... a rule needed by more than one of them", which no longer describes the page-layout section added below it; a one-line mention of the second purpose would keep it accurate.

---

Review generated using glm-5.3 via Z.AI. Comment /review to re-run.

[pieer]

Approved