Skip to content

fix: overflow of some components - #1016

Merged
talpitoo merged 6 commits into
developfrom
fix/overflow
Aug 11, 2026
Merged

fix: overflow of some components#1016
talpitoo merged 6 commits into
developfrom
fix/overflow

Conversation

@tibnor

@tibnor tibnor commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

  • Bug Fixes

    • Improved SVG rendering and visual alignment across navigation instruments.
    • Prevented instrument visuals from overflowing their visible bounds.
  • Style

    • Updated SVG and container display behavior for more consistent rendering.
    • Refined clipping behavior for overflowing visuals.
  • Documentation

    • Updated geometry guidance and documented clipping behavior, including compass-sector arrow-tip handling.

@tibnor
tibnor requested review from jon-daeh and ulrik-jo as code owners June 29, 2026 10:14
@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f1b7cfd3-6fa3-4fbb-819d-5299c31f35f4

📥 Commits

Reviewing files that changed from the base of the PR and between 32bcb3d and 6703e50.

⛔ Files ignored due to path filters (8)
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/default-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/not-zoomed-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/tickmarks-inside-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/with-advices-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/with-rot-bar-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/with-rot-bar-enhanced-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/with-rot-dots-auto.png is excluded by !**/*.png
  • packages/openbridge-webcomponents/__vis__/linux/__baselines__/navigation-instruments/compass-sector/compass-sector.stories.ts/with-setpoint-auto.png is excluded by !**/*.png
📒 Files selected for processing (7)
  • .cursor/rules/watch-radial-instruments.mdc
  • .github/instructions/watch-radial-instruments.instructions.md
  • docs/agents/watch-radial-instruments.md
  • packages/openbridge-webcomponents/src/navigation-instruments/compass-sector/compass-sector.css
  • packages/openbridge-webcomponents/src/navigation-instruments/thruster/thruster.ts
  • packages/openbridge-webcomponents/src/navigation-instruments/watch-flat/watch-flat.css
  • packages/openbridge-webcomponents/src/navigation-instruments/watch/watch.css
🚧 Files skipped from review as they are similar to previous changes (4)
  • packages/openbridge-webcomponents/src/navigation-instruments/compass-sector/compass-sector.css
  • packages/openbridge-webcomponents/src/navigation-instruments/watch-flat/watch-flat.css
  • packages/openbridge-webcomponents/src/navigation-instruments/watch/watch.css
  • packages/openbridge-webcomponents/src/navigation-instruments/thruster/thruster.ts

📝 Walkthrough

Walkthrough

Navigation instrument styles now clip compass-sector host overflow and render SVG elements as blocks in thruster, watch-flat, and watch. Radial instrument guidance documents the clipping behavior, SVG layout behavior, arrow-apex shaving, and geometry input updates.

Changes

Navigation instrument rendering

Layer / File(s) Summary
CSS layout and clipping fixes
packages/openbridge-webcomponents/src/navigation-instruments/compass-sector/compass-sector.css, packages/openbridge-webcomponents/src/navigation-instruments/thruster/thruster.ts, packages/openbridge-webcomponents/src/navigation-instruments/watch-flat/watch-flat.css, packages/openbridge-webcomponents/src/navigation-instruments/watch/watch.css
Adds host overflow clipping and display: block rules for SVG elements.
Radial instrument behavior documentation
.cursor/rules/watch-radial-instruments.mdc, .github/instructions/watch-radial-instruments.instructions.md, docs/agents/watch-radial-instruments.md
Reformats geometry guidance and documents clipping behavior, SVG layout behavior, arrow-apex shaving, and related cautions.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related issues

Possibly related PRs

Suggested labels: documentation

Suggested reviewers: jon-daeh, ulrik-jo

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the primary change: fixing overflow in several components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/overflow

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

@talpitoo

Copy link
Copy Markdown
Collaborator

Evaluated this PR against latest develop (which now includes the #1049 radial-frame refactor) — full findings below. TL;DR: both fixes are the right direction; the svg hunks are verified pixel-safe, the compass-sector hunk needs its baselines regenerated, and two stray PNGs need removing.

Root causes (reverse-engineered)

1. Inline-SVG line-box gap — the three svg { display: block } hunks (watch, watch-flat, thruster). SVG defaults to display: inline, so an in-flow shadow <svg> participates in a text line box: baseline alignment + the font strut reserve ~3–5px of descender space below it. With svg { height: 100% } the shadow content becomes taller than the host → phantom overflow (mystery scrollbars / extra height in overflow: auto dashboard cells). display: block removes line-box participation — the canonical fix, applied at the source.

2. Rotated element-box overflow — the compass-sector :host { overflow: hidden } hunk. The overlay is <svg … transform="rotate(${rotation})">, which rotates the element box; a rotated 100%-sized box swings its corners outside the host (up to ~21% per side), leaking visible arc pixels in wide layouts (the cs-wide.png evidence). obc-watch rotates its svg the same way and has carried :host{overflow:hidden} since #994 — same bug class, same fix. These are the only two element-box rotations in the codebase, so coverage is complete.

Verification against latest develop (post-#1049)

Applied all four hunks locally on top of develop and ran the radial visual suites: watch 21, watch-flat 2, azimuth-thruster(+thruster) 25, compass 9, heading 3, gauge-radial 32, instrument-radial 10, rudder 13, speed-gauge 7, rot-sector 9 — all byte-identical. The svg{display:block} hunks move zero pixels (the gap is phantom layout height only) and are mildly complementary to #1049 (observeInnerBox() observes that very svg; a block box is a cleaner ResizeObserver target). No textual conflicts — the file sets are disjoint.

compass-sector: 8 of 12 baselines fail with the hunk applied (39–95 differing px each). The diffs are uniformly the HDG/COG arrow apexes shaved by 1–2px — the arrow tips legitimately poke just past the host's top edge in the current framing, and previously rendered outside the component box (overflow: visible). Clipping them is honest (it is exactly the overflow this PR eliminates), but the PR ships no baseline updates, so CI fails as-is.

Coverage — does anything else need the same fixes?

Audited the whole family: every other radial svg is absolutely positioned (.container > * — blockified, immune to the line-box gap), a grid/flex item (blockified), or already carries display:block (the indicator family, gauge-radial, azimuth CSS). So these hunks are the complete set. One adjacent gap this PR intentionally doesn't cover (documented in watch-radial-instruments.instructions.md): several radial hosts have no :host{display} rule and render inline, where overflow:hidden is inert per CSS — the long-term hygiene fix is :host{display:block; width/height:100%} across all radial hosts, but that is layout-affecting and deserves its own snapshot pass.

Changes being applied to this branch

  1. Remove the two accidental root-level screenshots (compass-sector-default.png, cs-wide.png).
  2. Merge latest develop (includes fix(instruments): width-aware label reserve and faceDiameter for radial instruments #1049).
  3. Regenerate the 8 compass-sector baselines (arrow-tip shave), verify stability, and re-verify the rest of the radial family is untouched.

talpitoo and others added 2 commits July 22, 2026 11:48
…selines

Removes the two accidentally committed root-level screenshots and
regenerates the 8 compass-sector baselines affected by the new
:host{overflow:hidden}: the HDG/COG arrow apexes previously painted
1-2px outside the host box (overflow:visible) and are now clipped at
the edge — imperceptible at normal viewing, verified sharp in the new
baselines. Full radial family re-verified byte-identical on top of
latest develop (incl. #1049): watch, watch-flat, azimuth(+thruster),
compass, heading, gauge-radial, instrument-radial, rudder, speed-gauge,
rot-sector, wind, compass-flat — 155 tests.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings July 22, 2026 11:51

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@talpitoo

Copy link
Copy Markdown
Collaborator

Applied the changes from the evaluation above directly on this branch:

  • 0c6f88b5d — merged latest develop (includes the fix(instruments): width-aware label reserve and faceDiameter for radial instruments #1049 radial-frame refactor). Clean merge, no conflicts; all four CSS/TS hunks intact.
  • 077a4ca4e — removed the two accidental root-level screenshots (compass-sector-default.png, cs-wide.png) and regenerated the 8 compass-sector baselines affected by :host{overflow:hidden} (the 1–2px arrow-apex clip; verified the arrows still read as sharp points in the new baselines).

Verification on the updated branch: compass-sector 12/12 stable on re-run; full radial sweep byte-identical — watch 21, watch-flat 2, azimuth(+thruster) 25, compass 9, heading 3, gauge-radial 32, instrument-radial 10, rudder 13, speed-gauge 7, rot-sector 9, wind 18, compass-flat 6 (155 tests). Typecheck clean. From my side this is now ready for review/merge.

…revisit path

Records why :host{overflow:hidden} exists (rotated overlay element box
leaking arc pixels in wide layouts), the accepted 1-2px HDG/COG arrow
apex shave it introduces, and the designer revisit path (frame headroom
instead of removing the clip) — including the interaction cautions with
the #1021/#1049 label-reserve geometry, in both compass-sector.css and
watch-radial-instruments.instructions.md.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown

talpitoo and others added 2 commits August 11, 2026 08:41
…e of truth

The merge of develop brought #1118 (docs/agents is now the single source;
.github/instructions/* and .cursor/rules/* are generated), so the section
PR #1016 added to the generated instructions file would have been wiped by
the next agents:sync. Move it into docs/agents/watch-radial-instruments.md
and regenerate both adapters.

While porting: fix a prettier-mangled bullet ("PADDING = 72 + per-FOV"
had turned into a nested list), point the compass-sector.css comment at
the docs/agents path instead of the generated file, and add a paragraph
recording why the leak needs a cropped frame and why rotating an inner
<g> (which would make the svg's own viewport clip sufficient) was not
taken: shared-core refactor, family-wide baseline churn, no visual gain.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@talpitoo

Copy link
Copy Markdown
Collaborator

Brought the branch up to date with develop again (next.103 → next.122, 51 commits) and re-verified. Two commits:

  • bd59069c — merged latest develop. Clean auto-merge: the four CSS/TS hunks and the 8 regenerated baselines are untouched on the develop side, and compass-sector's readout refactor from the interim is pixel-neutral — 12/12 pass against the July baselines.
  • 6703e50f — re-homed the docs. refactor(agent-docs): make docs/agents the single source of truth for agent instructions #1118 made docs/agents/ the single source of truth and turned .github/instructions/ + .cursor/rules/ into generated adapters, so the "Host clipping & the arrow-apex shave" section this PR added to the (now generated) instructions file would have been silently wiped by the next agents:sync. It now lives in docs/agents/watch-radial-instruments.md, with both adapters regenerated (agents:sync --check green). While porting: fixed a prettier-mangled bullet, pointed the compass-sector.css comment at the source doc, and added a paragraph recording why the leak needs a cropped frame to show (a full-circle face in its origin-centred box is rotation-invariant) and why rotating an inner <g> — which would let the svg's own viewport clip contain everything by construction — was not taken: it refactors the shared core's rotation path, risks AA-level baseline churn across every rotating instrument, and buys no visual improvement (the apex shave happens at the same box edge either way).

Re-verification on top of next.122:

  • Re-audited both mechanisms against today's code: obc-watch and obc-compass-sector are still the only two <svg> element-box rotations — none of the instruments added since (current, top-view-propulsion, position-deviation, speed-directions, wind-propulsion, gauge-radial-proportional, pitch-roll-yaw, velocity-projection-plot) reintroduce the pattern, and they all use the absolutely-positioned container layout, which is immune to the line-box gap. The four hunks remain the complete set for this family.
  • Full visual sweep of navigation-instruments + radial building blocks: 494 passed, 8 failed — all 8 in indicator-graph, which fails identically on pristine develop in the same container (local rendering flake, no obc-watch involvement; CI is the arbiter there).
  • Stragglers with the inline-svg gap outside this PR's family: bearing-indicator, compass-indicator, gauge-horizontal, gauge-vertical still render in-flow inline svgs without display:block. Their indicator/gauge siblings already carry the rule, so aligning them would be a trivial follow-up PR.

Still ready for review/merge from my side.

@talpitoo
talpitoo merged commit d922e4d into develop Aug 11, 2026
13 of 14 checks passed
@talpitoo
talpitoo deleted the fix/overflow branch August 11, 2026 09:32
openbridge-release-bot Bot pushed a commit that referenced this pull request Aug 11, 2026
## [2.0.0-next.123](v2.0.0-next.122...v2.0.0-next.123) (2026-08-11)

### Bug Fixes

* overflow of some components ([#1016](#1016)) ([d922e4d](d922e4d)), closes [#1049](#1049) [1021/#1049](https://github.com/1021/openbridge-webcomponents/issues/1049) [#1118](#1118)
talpitoo added a commit that referenced this pull request Aug 12, 2026
…nts (#1130)

* fix(instruments): remove inline-svg line-box gap in remaining components

Aligns the last four components rendering an in-flow inline <svg> with
the display:block pattern established across the families and extended
by #1016: bearing-indicator and compass-indicator get the rule in their
(previously empty) stylesheets; gauge-horizontal and gauge-vertical
render into light DOM (createRenderRoot returns this), where static
styles never attach, so they carry it on the svg's existing inline
style binding instead.

Four comparison-story baselines compact: stacked in-flow gauges sat
~4px apart on phantom descender space, which was the bug. Single-
instance stories, both indicators and the composite consumers
(gauge-bar-indicator, setpoint) are byte-identical.

Also adds the two prevention checklist lines to
docs/agents/watch-radial-instruments.md (element-box rotation needs a
host clip; in-flow svgs need display:block) and regenerates the
instruction adapters.

Part of #1129

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* docs(agents): record the measured verdict on inner-<g> rotation

Replaces the speculative churn/perf clause in the host-clipping section
with the #1129 measurements: element-level transform updates reuse the
display list (~3x less main-thread Paint at 10 Hz than rotating an inner
<g>, raster equal), and the swap is only a drop-in on origin-centred
viewBoxes — on compass-sector's cropped frame the rotation centres
differ and a naive swap displaces the arc.

Part of #1129

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants