fix(bulma-ui): place a portaled picker panel by its coordinates alone

[allxsmith]

A portaled DateInput, TimeInput or DateTimeInput panel drew at the wrong size. .picker-popover.is-portal didn't reset the right and bottom that the corner classes set, so:

• at bottom-right, including auto flipping to it, the panel stretched to the viewport's right edge (700px wide for 224px of content in an 800px viewport);
• at the top corners, the box collapsed to its padding and the content drew below its background.

The portal rule now resets right and bottom to auto, so a portaled panel is placed only by the inline top and left the positioning hook sets. In-place panels are unchanged. Measured in Chromium after the fix, every portaled corner is 224×144, and the in-place numbers are identical to before. Popover's own portal rule already resets them.

A portaled panel's gap is now a margin set from --bulma-picker-popover-offset, as on Popover, so overriding that variable moves a portaled panel too, and auto makes room for that gap. An in-place panel's auto still budgets the hook's default 4px, since its gap sits in top or bottom, where auto can't read it (tracked in #904).

At 768px wide or less, TimeInput's bottom-sheet rule set right and bottom after the portal reset at the same specificity, so a portaled TimeInput panel still stretched there. That rule now skips a portaled panel, which stays on its corner, and an in-place TimeInput panel is still a sheet.

A new styles test renders all three pickers at every corner. It compiles the partial plain and with the bestax- prefix for the portaled gap and the in-place corners, and compiles every published stylesheet to check, at a phone and a desktop width, that a portaled panel is placed by its inline coordinates alone. Every portaled case failed on main.

pnpm all passes locally.

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 36 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Repository: allxsmith/bestax/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 43009320-95b2-46b8-a4cb-fc4e8b8d8f71

📥 Commits

Reviewing files that changed from the base of the PR and between 99426b4 and e6261ed.

📒 Files selected for processing (12)

• bestax-mcp/data/components/TimeInput.json
• bulma-ui/src/components/Popover.tsx
• bulma-ui/src/form/DateInput.stories.tsx
• bulma-ui/src/form/TimeInputBase.tsx
• bulma-ui/src/form/__tests__/PickerPopover.styles.test.tsx
• bulma-ui/src/form/__tests__/PickerPopover.test.tsx
• bulma-ui/src/form/_pickerInternals/PickerPopover.tsx
• bulma-ui/src/helpers/__tests__/useAnchoredPosition.test.tsx
• bulma-ui/src/helpers/useAnchoredPosition.ts
• bulma-ui/src/scss/form/_picker-popover.scss
• bulma-ui/src/scss/form/_timeinput.scss
• docs/docs/api/form/datetime/timeinput.md

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview Deployment

Preview URL: https://32451782.bestax.pages.dev

[claude]

Deep review — 0 blocking · 2 advisory

#	Severity	Area	Finding	Location
1	🔵 Advisory	Robustness	The new test asserts the declarations (right: auto / bottom: auto), not the geometry the bug was about — jsdom does no layout, so it cannot regress-guard the 700px-wide / collapsed box itself	bulma-ui/src/form/__tests__/PickerPopover.styles.test.tsx:94
2	🔵 Advisory	API	A portaled panel's gap is the hook's hardcoded offset: 4, so --bulma-picker-popover-offset (listed in all three pickers' theming tables) moves an in-place panel and not a portaled one	bulma-ui/src/form/_pickerInternals/PickerPopover.tsx:44

Overall: The change is sound and minimal, and it is the right fix rather than a patch over a symptom. I verified the mechanism independently: with position: fixed, right: 0 alongside an inline left makes CSS solve width to fill to the viewport edge, and bottom: calc(100% + offset) alongside an inline top solves height to a negative value that clamps to 0 — exactly the two shapes the PR body describes. Resetting both in the later-but-equal-specificity .is-portal block (0,2,0 against the corners' 0,2,0, portal rule last in source order) is enough for the cascade, and it also repairs the hook's measurement: pre-fix a portaled top-corner panel was measured while collapsed, so top: rect.top - height - offset was computed from a wrong height; post-fix the first layout-effect pass measures a natural box because bottom is auto before the inline top exists. useAnchoredPosition has exactly two call sites (Popover.tsx, PickerPopover.tsx) and Popover's portal rule already resets both, so the fix closes the class rather than one instance. 1755 tests across src/form + Popover pass, including the new file's 48 cases. The riskiest part is that the regression guard is weaker than the bug it guards (advisory 1) — a human should look there first, and then at whether advisory 2 is worth folding in now that portaled panels actually render.

Residual risk:

• Other portaled panels carrying corner classes — refuted. is-portal appears in only two partials, _popover.scss and _picker-popover.scss; _toast.scss and _badge.scss use corner classes but never portal. Popover's rule already carries right: auto; bottom: auto plus a margin flip for its top corners (bulma-ui/src/scss/components/_popover.scss:97-105), and it is the only other consumer of useAnchoredPosition.
• position="auto" not exercised by the new test — refuted as a real gap. auto is resolved to one of the same four corner classes before the class is emitted, so the fix covers it by construction; and in jsdom every getBoundingClientRect() is zero, so resolveAuto always returns bottom-left. An auto case would assert nothing the explicit bottom-left case already does.
• Paint before the first measurement — refuted. On the commit before the layout effect runs, a portaled bottom-corner panel still inherits top: calc(100% + offset) from the corner rule (.is-portal resets only right/bottom), which for a fixed box is one viewport down. useClientLayoutEffect is useLayoutEffect in the browser, so the inline top/left land before paint. The server path is unreachable: picker open state is useState(false) (bulma-ui/src/form/DateInputBase.tsx:297) with no defaultOpen, so SSR renders no panel at all and there is no hydration-flash window.
• Shrink-to-fit squeezing the panel now that right is auto — refuted. For right corners left = rect.right - width, so the available width is at least the measured width whenever the anchor is on screen. For left corners the behaviour is identical to pre-fix (neither corner declared right), and the calendar grid's min-content floor keeps it from compressing.
• Open: the test's assertions are satisfied by the two declarations merely existing, so a future regression that re-breaks the fixed box through a different property — an added width, an inset shorthand, a consumer override at higher specificity — would still pass. jsdom cannot see it, and closing it would need a real layout engine, which this repo's styles-test pattern does not have.
• Open: the offset asymmetry in advisory 2. Harmless at defaults ($picker-popover-offset: 4px equals the hook's offset = 4), divergent only for a consumer who overrides the variable. Popover's answer — offset: 0 plus styledGap plus margin-based gaps kept in the portal rule — is not directly transplantable, because the picker encodes its gap in calc(100% + …) on top/bottom rather than in margins.

🏄 Two lines of auto and the panel stops hanging ten off the back of the board — clean little fix, no wax left on the deck, paddles out as-is. The 48-case test set is a solid lineup, just know it's watching the sets from the beach, since jsdom never actually gets in the water.

[github-actions]

📸 Story screenshots at handoff — e6261ed

18 stories (light + dark) from this PR's changed files under bulma-ui/src/ (workflow run · artifact story-screenshots-pr-886, 30-day retention).

components-popover--default · Components/Popover · Default

Light	Dark

components-popover--compound-usage · Components/Popover · Compound Usage

Light	Dark

components-popover--positions · Components/Popover · Positions

Light	Dark

components-popover--append-to-body · Components/Popover · Append To Body

Light	Dark

components-popover--controlled · Components/Popover · Controlled

Light	Dark

components-popover--share-options · Components/Popover · Share Options

Light	Dark

form-dateinput--default · Form/DateInput · Default

Light	Dark

form-dateinput--controlled · Form/DateInput · Controlled

Light	Dark

form-dateinput--sizes · Form/DateInput · Sizes

Light	Dark

form-dateinput--colors · Form/DateInput · Colors

Light	Dark

form-dateinput--inline-colors · Form/DateInput · Inline Colors

Light	Dark

form-dateinput--states · Form/DateInput · States

Light	Dark

form-timeinput--default · Form/TimeInput · Default

Light	Dark

form-timeinput--controlled · Form/TimeInput · Controlled

Light	Dark

form-timeinput--sizes · Form/TimeInput · Sizes

Light	Dark

form-timeinput--format-12-h · Form/TimeInput · Format 12 H

Light	Dark

form-timeinput--with-seconds · Form/TimeInput · With Seconds

Light	Dark

form-timeinput--increment-steps · Form/TimeInput · Increment Steps

Light	Dark

> ✂ 69 more matched stories skipped by the cap: `components-popover--non-button-trigger`, `form-dateinput--inline`, `form-dateinput--min-max`, `form-dateinput--disabled-dates`, `form-dateinput--first-day-of-week`, `form-dateinput--locale`, `form-dateinput--custom-format`, `form-dateinput--formats`, `form-dateinput--custom-parse`, `form-dateinput--mobile-native`, … — full set in the artifact.

[github-actions]

Preview Deployment

Preview URL: https://6ff4ce13.bestax.pages.dev

[allxsmith]

Every finding from the review, fixed in abc8c50:

1. The styles test checked declarations, not geometry: fixed. A new AppendToBody story on DateInput has a play function that runs in Chromium in both Storybook passes: it opens each corner and checks the panel sits on its input's edge at the offset distance without its content overflowing. Against the old picker code it fails (the bottom-right panel ran to the viewport edge, and the top panels overflowed).
2. A portaled panel's gap ignored --bulma-picker-popover-offset: fixed. The portal rule puts the gap in a margin, as Popover does, and PickerPopover passes the hook a reader for it, so auto leaves room for the real gap. Popover's margin reader moved into useAnchoredPosition as marginGap, and both use it. An in-place panel's rendered gap follows the variable too; only its auto fit check still uses the hook's default, since its gap sits in top and bottom.

[allxsmith]

deep-review: fresh

The advisories from the last review are fixed or answered in the comment above; this reviews abc8c50.

[claude]

Deep review — 0 blocking · 5 advisory

No.	Severity	Area	Finding	Location
1	🔵 Advisory	API	The PR body is stale against commit abc8c503 — it still says "Left as is: a portaled panel's gap comes from the hook's fixed offset rather than --bulma-picker-popover-offset, so overriding that variable doesn't move a portaled panel", which is exactly what the second commit changed. The title ("place a portaled picker panel by its coordinates alone") no longer covers the second half either. Maintainer action — neither this review nor the fix agent can edit a PR body.	PR description
2	🔵 Advisory	API	An in-place panel's auto resolution still reserves the hook's hard-coded 4 rather than the real --bulma-picker-popover-offset, so a themed offset larger than 4px can let auto pick a bottom corner with no room for the gap — the asymmetry the portaled half of this PR just removed	bulma-ui/src/form/_pickerInternals/PickerPopover.tsx:55
3	🔵 Advisory	API	register-vars declares --bulma-picker-popover-offset on .picker-popover itself, and a custom property declared on an element always beats the inherited value, so the gap tracks that variable only through $picker-popover-offset or a rule on the panel's own class — a Theme/:root override is shadowed. Pre-existing and systemic to every extras partial (Theme.tsx:59-62 already records the mechanic for --bulma-shadow), and equally true of the in-place path before this PR	bulma-ui/src/scss/form/_picker-popover.scss:25
4	🔵 Advisory	Robustness	The only browser-side geometry guard is a story play function inside the smoke gate, and it has two fragile edges: Animation.finished rejects when an animation is cancelled, and a rejection inside Promise.all fails the story rather than skipping the wait; and the overflow probe subtracts integer-rounded scrollHeight/clientHeight, so a 1px rounding reads as content overflow. Green on this SHA in both passes, but a flake here reds every open PR	bulma-ui/src/form/DateInput.stories.tsx:809
5	🔵 Advisory	Correctness	The new SCSS comment says "the gap is a margin on the side facing it", which reads as margin-bottom for the two top corners — they use a negative margin-top. Deleting "on the side facing it" leaves the sentence true	bulma-ui/src/scss/form/_picker-popover.scss:63

Overall: Sound, and the second commit is a better fix rather than a patch over the first — moving the gap out of the coordinates and into a margin is the shape Popover already uses, and hoisting styledGap into a shared marginGap means the hook's two call sites now agree instead of one carrying a private copy. I re-derived the geometry against CSS 2.1 §10.6.4 (an absolutely positioned top places the margin edge, so top: rect.bottom with margin-top: offset lands the border box at rect.bottom + offset, and top: rect.top − height with margin-top: −offset lands its bottom at rect.top − offset) — both match the story's assertions exactly, and at the default 4px the rendered result is the same as the first commit, so this is purely the change that makes the variable live. The riskiest part is advisory 4: that story is the only thing able to see this defect class at all, and it now sits in a gate that fails every PR if it flakes — look there first, then at advisory 1, since the squash body is what ships in the changelog.

Residual risk:

• Other portaled surfaces carrying corner classes — refuted. is-portal appears in exactly two partials (_popover.scss, _picker-popover.scss); Modal.tsx/Dialog.tsx portal but carry no corner classes, and useAnchoredPosition still has exactly two call sites, both of which now pass marginGap.
• auto oscillating because it reads a margin the corner it just resolved sets — refuted. marginGap takes the absolute magnitude and both corner groups set the same offset in magnitude, so the reported gap is identical whichever class is applied, and there is no second-pass flip. Exercised by the new PickerPopover.test.tsx:335 case, which settles on is-top-left from a 20px margin.
• A browser-invisible regression surviving the jsdom tests — refuted for this SHA empirically rather than by reading. Chromium will not launch in this sandbox (playwright install cannot reach its CDN here), so I read CI instead: job 111475356886 on abc8c503 shows src/form/DateInput.stories.tsx PASS under browser: chromium in both the light and the dark smoke pass, so the play function's four-corner edge/gap/overflow assertions did execute and did hold in a real engine. Locally I ran the six jsdom suites the diff touches (172 tests), the full bulma-ui coverage run (156 suites / 5568 tests, useAnchoredPosition.ts at 100% on every metric), typecheck:tests, eslint over all five changed sources, and check:conformance — all green.
• A portaled panel still leaving the viewport — open, pre-existing, untouched by the diff. An explicit position is never re-resolved, and resolveAuto checks width only on the horizontal axis, with no check that a top-* corner fits above the anchor, so a panel can still run off the top or the right. This diff changes where the gap comes from, not the fit policy.
• In-place auto under a themed offset — open; advisory 2 above.

🏄 Clean little follow-through, dude — the first commit stopped the panel blowing out to the viewport edge, and this one hands the gap back to the offset variable so themers finally get a wave to ride. The chromium pass already called it good; just freshen that PR body before you paddle out.

[allxsmith]

deep-review: fresh

Main is merged in, so this review posts every finding, advisory included, as its own thread. It reviews 73d4c74.

[github-actions]

Preview Deployment

Preview URL: https://82ecb3cb.bestax.pages.dev

[allxsmith]

deep-review: fresh

The last run on 73d4c74 was cancelled after it posted four threads but before its summary. Those four are still open: read them first, do not post them again, and count each as a row in this review's table. Then review the rest of the change as usual. This reviews 73d4c74.

[claude]

Deep review — 2 blocking · 3 advisory

No	Severity	Area	Finding	Location
1	🟠 Major	Correctness	The new right/bottom reset on .is-portal loses the cascade to the TimeInput :has(.timeinput-panel) mobile sheet rule (equal specificity, emitted later), so a portaled TimeInput panel at or below 768px still stretches — and the styles test compiles the bare partial, so it cannot see it	bulma-ui/src/scss/form/_picker-popover.scss:66
2	🟡 Minor	API	The PR body still says a portaled panel takes no gap from --bulma-picker-popover-offset, which abc8c503 is precisely the commit that fixed (maintainer action — the finding has no line of its own)	bulma-ui/src/components/Popover.tsx:18
3	🔵 Advisory	Robustness	Animation.finished rejects on cancel, so Promise.all turns a cancelled fade-in into a Storybook gate failure; the scrollHeight probe is rounding-sensitive too	bulma-ui/src/form/DateInput.stories.tsx:809
4	🔵 Advisory	API	auto on an in-place panel still budgets the hard-coded 4px from the hook, so a themed offset can overflow the viewport — the asymmetry this PR removes on the portaled path only	bulma-ui/src/form/_pickerInternals/PickerPopover.tsx:63
5	🔵 Advisory	Correctness	The comment calls the gap a margin on the side facing the anchor, but both corner groups use margin-top — the next reader is invited to correct it to margin-bottom, which silently does nothing	bulma-ui/src/scss/form/_picker-popover.scss:63

Overall: The core change is right and well evidenced. Resetting right and bottom on .is-portal is the correct fix for a fixed box placed by coordinates; moving the gap into margin-top makes --bulma-picker-popover-offset real for portaled panels; and hoisting styledGap into marginGap is a verbatim move that leaves Popover behaviour untouched, with the coordinate deltas in PickerPopover.test.tsx being exactly the 4px that left the coordinates. The riskiest part is that the confidence of the new test does not reach as far as it reads: it compiles form/picker-popover in isolation, so the one later partial that overrides .picker-popover — the TimeInput mobile sheet — wins the cascade unseen (finding 1). Look at that first, then rule on the stale paragraph in the PR body (finding 2), since that text becomes the squash body and the changelog.

Residual risk:

• The TimeInput sheet rule at or below 768px — open, posted as finding 1. The only live path I found where the addressed failure class survives this fix.
• Other partials overriding .picker-popover — refuted: a grep over src/scss finds _timeinput.scss:346 as the only rule outside _picker-popover.scss that targets the class, and the lone margin in _dateinput.scss is on .dateinput-cell:157, so marginGap reads nothing stray.
• An auto feedback loop through the margin it reads — refuted: both corner groups use the same magnitude (+offset and -1 * offset), so marginGap returns the same number before and after a flip, and fitsBelow in resolveAuto cannot oscillate on it.
• The prefixed flavour — refuted: the styles test compiles with a bestax- class prefix and asserts the portal reset and the margin for all three pickers at all four corners. 172 tests green locally, with useAnchoredPosition.ts and PickerPopover.tsx at 100% statements.
• Insets left unreset on .is-portal — open but masked: the rule resets right and bottom but not the top: calc(100% + offset) of the bottom corners, which on a fixed box resolves against the viewport. Every real path masks it with the inline top the hook sets, so it bites only if a measurement bails with no coordinates — not reachable today, because the panel and its anchor mount together.
• marginGap calls the global getComputedStyle while the hook resolves view from the ownerDocument of the anchor for iframe support. Worst case is a zero gap and a 4px-optimistic auto rather than a thrown error, and it predates this PR: the function moved verbatim out of Popover.tsx.
• The gap in the play function is parseFloat of the raw custom-property token — a theme setting the offset in rem would make the expectation of the story disagree with the real margin. No story in the repo does that, and it fails loudly rather than silently if one ever does.

🏄 Clean little set on this one, dude — the portal rule finally stops fighting its own corners, and the gap rides the theme variable like it always should have. Just watch the inside break: the narrow-screen TimeInput sheet still owns right and bottom, and the new test is paddling in a different lineup than the one that ships.

[allxsmith]

deep-review: verify

Every open thread has a reply: fixed, with the commit, or refuted with a reason. This settles them on e6261ed.

[github-actions]

Preview Deployment

Preview URL: https://4566cee8.bestax.pages.dev

[claude]

Deep review (verify) — 5 resolved · 0 open

#	Severity	Area	Thread	Disposition	Location
1	🟠 Major	Correctness	is-portal lost the cascade to TimeInput's mobile sheet rule	Verified fixed	bulma-ui/src/scss/form/_timeinput.scss:349
2	🟡 Minor	API	PR body stated the opposite of what the branch ships	Verified fixed	PR description
3	🔵 Advisory	Robustness	A cancelled animation turned the browser-side geometry guard into a gate failure	Verified fixed	bulma-ui/src/form/DateInput.stories.tsx:810
4	🔵 Advisory	API	auto on an in-place panel reserves a hard-coded 4px	Reason accepted (#904)	bulma-ui/src/form/_pickerInternals/PickerPopover.tsx:63
5	🔵 Advisory	Correctness	"the side facing it" vs both corner groups using margin-top	Verified fixed	bulma-ui/src/scss/form/_picker-popover.scss:60

Overall: This pass settled threads and reviewed no commits. All five of my open threads are now resolved — four as fixed in 78594c9e/e6261ed7 and in the PR body, and one on a reason that holds: the in-place auto estimate predates this PR, the follow-up is tracked in open issue #904, and the author's objection to my insetGap sketch is correct (a positioned box resolves top to a used px value on the top corners, so the sketch would clamp to 0 there — a code suggestion of mine that would not have worked as written). The strongest part of the fix round is the test: PickerPopover.styles.test.tsx now compiles every published stylesheet and ranks the placement rules itself by importance → inline → specificity → source order with width media queries applied, which is what made the TimeInput cascade defect visible to jsdom at all. A human should sanity-check that hand-rolled cascade model, since it is now the thing standing between a later .picker-popover rule and a regression.

Residual risk: this was a verify pass, so no new hunt was run. For the record on what I re-checked while settling:

• The :not(.is-portal) guard removes the match entirely rather than relying on specificity, so source order between picker-popover and timeinput in form/_index.scss no longer matters for a portaled panel — refuted by reading the compiled selector and by the published-sheet cases at 375px passing for all three pickers × four corners.
• The styles test's placement() ignores physical-vs-logical conflicts only for the inset* shorthand, which it asserts is absent per matching rule — so an inset-block/inset-inline added later fails loudly rather than silently (PickerPopover.styles.test.tsx:291).
• 240 tests across PickerPopover.styles.test.tsx, PickerPopover.test.tsx and useAnchoredPosition.test.tsx pass on e6261ed7.

🏄 Paddled back out to check the set I called earlier, and every wave came in clean — the TimeInput sheet no longer drops in on the portaled panel, the story settles its animations instead of wiping out, and the one left alone has a ticket with its name on it. All threads closed out, good to go.

[bestax-release-bot]

🎉 This PR is included in version 5.26.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bestax-release-bot]

🎉 This PR is included in version 2.25.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bestax-release-bot]

🎉 This PR is included in version 4.2.13 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bestax-release-bot]

🎉 This PR is included in version 1.14.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀