fix(street-level): fit the whole photo on phones

At phone width the right rail is the band between mid-screen and the credit
line, so a 16:10 viewer plus its bar and caption was cut off. Below 720 px
the viewer's height is derived from that band (clamped 110-320 px); floating
and expanded viewers reset to auto height. The QA harness checks the photo
and caption fit at 390x844, and CURRENT-STATE documents the docking rules
and phone sizing.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Said TurkseverandClaude Opus 5.5 committed 2026-09-25 21:18:40 +01:00
1 parent 6207e4144e
commit e6c2c812f9
4 files changed
+91 -2

No files matched your search

+13
View File
@@ -122,6 +122,19 @@ test('labels say what the buttons do', () => {
);
});
test('on phones the viewer is sized from the rail band, not its aspect ratio', () => {
assert.match(
panelCss,
/@media \(max-width: 720px\) \{\s*\.sl-viewer \{[^}]*height: clamp\(/,
);
// Floating and expanded viewers must not inherit the phone height.
for (const selector of [
".panel-floating\\[style\\*='height'\\] \\.sl-viewer",
'\\.sl-viewer-wrap-expanded \\.sl-viewer',
])
assert.match(panelCss, new RegExp(`${selector} \\{[^}]*height: auto`));
});
test('the viewer comes first and the panel is a portable, resizable window', () => {
const controlsBlock = html.slice(html.indexOf('<fieldset id="sl-controls"'));
assert.ok(