The mortgage application sits in a pane, under its own ribbon

Featurekamo-apps
Shipped
September 5, 2026 at 11:52 PM UTC
Author
Kamo
Commit
fed85fb

Ports the shell from kamo-login and kamo-register: a card inset 15px from the browser edge with a 14px radius, a soft shadow, and a red ribbon across its top-right corner reading "Your Home Awaits". The geometry is copied verbatim — the three sit on one funnel and a borrower crosses between them, so the frame should not shift under them. Applied by the application route's own layout, not the root one. The patient portal, the confirmation screen and the productless landing page share this site and are not part of this; wrapping them all to reach one route would have been the larger edit, not the smaller one. The string went into kamo-translation-dictionary first, and had to. messages/ is gitignored here and CI clones the dictionary into it at build time from an unpinned branch, so a key a component reads must already be there or the build renders the key path at a borrower. What this route forces that the other two did not is the scroll. A sign-in screen fits its pane; a five-step application does not, so the pane is a scroll container rather than a clip. The document then no longer scrolls at all, which makes 100vh the wrong ruler inside it: min-h-screen would leave every screen 30px of scroll it never asked for, and Spine's h-screen sticky rail would hang 30px past the frame. Both are corrected by --pane-h, and corrected in CSS rather than in the components, because those components are shared with routes that have no pane — a percentage height would resolve against nothing there and collapse. --pane-h needs no such chain. Adds ViewportHeight, publishing visualViewport into --app-dvh as the other two do. 100dvh is the fallback but does not account for a phone keyboard, and with the pane pinned at full height its scroll region runs on behind one. The ribbon covers the pane's top-right corner, and MobileRail is pinned to exactly that corner with the language menu at its right edge — it sat under the band. Reserving room clears it down to 430px, below which the reserve stops being payable: the step counter and menu are 153px wide together and the reserve wants 151 more, which on a 330px pane leaves nothing for the lender's mark. The pair takes its own line there instead, ranged left, where the band has already run clear of it. Spine is reached only through ApplicationForm and so only by this route, so editing it touches nothing else. Verified against the real form with the product lookup stubbed, across eleven viewports from 1920x1080 to 320x568: no page text under the band at any of them, the sticky rail measuring exactly the pane's height at every desktop size, the document never scrolling, and the ribbon holding still — 0px of movement — while the form scrolls 400px inside the pane.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing