Sitelet https://github.com/Mindfeast/feastdocs/commit/dca2bead939d51dc03511d8d118089bb26392f15
Skip to content

Commit dca2bea

Browse files
joaoppacoomnijoaoppacoomni
committed
fix: the More menu was clipped out of existence
The strip carried `overflow: hidden` as a safety net for the frame before the tabs are measured. The dropdowns are absolutely positioned inside that box and hang below the row, so the clip removed them — the More button did nothing when clicked, and every other tab's menu was gone with it. It now clips only while measuring, when a full set of tabs is deliberately on screen to be sized. Once the widths are known nothing renders past the edge anyway, because the tabs that do not fit are not in the DOM. Worth recording how this got through: the earlier check read getBoundingClientRect() on the panel and found a sensible box on screen. A clipped element still reports its layout box, so that proves nothing about whether anyone can see it. The check now asks whether the panel is hit-testable — elementFromPoint at its own centre has to land inside it — and walks its ancestors for anything still clipping. Verified: no clipping ancestor, elementFromPoint at the panel centre returns a link inside it, five sections listed. Tabs stay clear of the search box and the strip never overflows at 1400, 1150 or 950px. All 14 tests pass.
1 parent 56592b9 commit dca2bea

3 files changed

Lines changed: 20 additions & 3 deletions

File tree

‎src/app/layout/navbar/navbar.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@
3939
</div>
4040
}
4141

42-
<nav class="fd-navbar__sections" aria-label="Sections" #sectionsNav>
42+
<nav
43+
class="fd-navbar__sections"
44+
[class.fd-navbar__sections--measuring]="measuring()"
45+
aria-label="Sections"
46+
#sectionsNav
47+
>
4348
@for (section of visibleSections(); track section.id) {
4449
<div
4550
class="fd-navbar__tab"

‎src/app/layout/navbar/navbar.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,8 @@
6262
gap: 0.25rem;
6363
// Takes the room left between the brand and the actions, and reports it
6464
// through its own box — that width is what decides how many tabs fit.
65-
// `hidden` is the safety net for the frame before the first measurement.
6665
flex: 1 1 auto;
6766
min-width: 0;
68-
overflow: hidden;
6967

7068
@media (max-width: 768px) {
7169
display: none;
@@ -234,6 +232,13 @@
234232
}
235233
}
236234

235+
// Only while measuring, when every tab is on screen so it can be sized. It
236+
// cannot stay: the dropdowns are absolutely positioned inside this box and hang
237+
// below the row, so a clipped strip clips them out of existence.
238+
.fd-navbar__sections--measuring {
239+
overflow: hidden;
240+
}
241+
237242
.fd-navbar__more {
238243
display: inline-flex;
239244
align-items: center;

‎src/app/layout/navbar/navbar.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,13 @@ export class Navbar {
115115
return n;
116116
});
117117

118+
/**
119+
* True until the tabs have been measured. The strip clips while it is, so a
120+
* full set cannot spill over the search box; afterwards it must not clip, or
121+
* it would cut off the menu that hangs below it.
122+
*/
123+
protected readonly measuring = computed(() => this.tabWidths().length === 0);
124+
118125
protected readonly visibleSections = computed(() =>
119126
this.sections().slice(0, this.visibleCount()),
120127
);

0 commit comments

Comments
 (0)