- Shipped
- September 5, 2026 at 8:34 PM UTC
- Author
- Kamo
- Commit
- d405a50
Ports kamo-login's shell: every route now renders inside .kamo-pane, a card inset 15px from the browser edge with a 14px radius, a soft shadow and overflow:hidden. The geometry is copied verbatim on purpose — the two products sit either side of one funnel and a user crosses between them mid-flow, so the frame should not shift under them. The ribbon's wording is the part that differs. kamo-login greets you with one line on every screen because there is only one thing you are there to do; registration is a funnel, so PaneRibbon names the step: "Let's Get Started!" on /, "Create Your Org" on /member, "Tell Us More!" on /team. A route missing from that map gets no ribbon at all rather than a generic greeting — /sorry, /logout and the verification screens are not places to be cheered along. Since the tails and the band both carry an explicit z-index, one component can own all three pieces and decide per route whether there is a ribbon at all. Every route sized itself to the viewport and so overflowed the pane by 30px; each root now fills it instead. RegisterFlow needed more than a swap of units: on a phone it was height:auto so the document scrolled, and inside a pane that clips, growing past it would have put the later steps out of reach. The scrolling moves inside the flow, which its own overflowY:auto already provided for. Adds ViewportHeight, publishing visualViewport into --app-dvh as kamo-login does. 100dvh is the fallback and would nearly do, but registration is a long form of text inputs and dvh does not account for a keyboard: with the stage pinned at full height the pane's scroll region runs on behind it, leaving the browser free to scroll a focused field underneath. The ribbon covers the pane's top-right corner, and unlike a sign-in card the registration header reaches that corner. Sweeping every text line on /, /member and /team across 11 viewports found the header's "Sign in here" under the band at 1024x768, 1100x700 and 1280x768 among others — not only a narrow-window problem, because the flow is vertically centred and a short window lifts the header into the band's path. Holding the header's right edge back clears it, except below 400px, where the reserve leaves less room than "KamoCRM" is wide and a single unbreakable word overflows its box rather than wrapping — no amount of padding moved it, so the title scales there instead. The sweep now reports no collisions on any of the 33 route/viewport combinations. Verified in a browser: the pane measures 15px from every edge on all eight routes with zero scroll overflow, the three ribbons carry the right words and fit the band's usable length (131, 117 and 96px against 192), and the other routes render no ribbon and no tails.