diff --git a/release_scope/_static/index.html b/release_scope/_static/index.html index ad645b5..806f744 100644 --- a/release_scope/_static/index.html +++ b/release_scope/_static/index.html @@ -59,7 +59,7 @@ .warn { color: var(--warn); } .message { white-space: pre-line; } .scroll { overflow-x: auto; } - .layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 32vw, 640px); gap: 24px; align-items: start; } + .layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr); gap: 24px; align-items: start; } .layout > aside { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 0 4px 16px; } .strip { display: none; writing-mode: vertical-rl; width: 40px; min-height: 240px; margin-top: 32px; padding: 12px 4px; border-color: var(--accent); color: var(--accent); font-weight: 600; } @@ -82,7 +82,7 @@ .service > summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; cursor: pointer; list-style: none; } .service[open] > summary { border-bottom: 1px solid var(--border); } - .service.deployed { border-left: 4px solid var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); } + .service.deployed { box-shadow: inset 3px 0 0 var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); } .service.deployed .name { color: var(--good); } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-fg); font-weight: 600; } @@ -91,6 +91,8 @@ .service > summary::before { content: "▸"; color: var(--muted); } .service[open] > summary::before { content: "▾"; } .service .name { min-width: 200px; font-weight: 600; } + .service .prod { display: inline-block; min-width: 8rem; } + .service .target { display: inline-flex; min-width: 8rem; } .service .body { padding: 8px 12px; } .service .body > p:first-child { margin-top: 0; } .status { display: inline-block; padding: 0 8px; border: 1px solid currentColor; border-radius: 10px; font-size: 12px; @@ -184,10 +186,10 @@
- - + - + diff --git a/tests/test_browser.py b/tests/test_browser.py index 0f0af3c..4d794ca 100644 --- a/tests/test_browser.py +++ b/tests/test_browser.py @@ -275,12 +275,37 @@ def test_demo_an_idle_service_keeps_readable_text( assert errors == [] -def test_demo_the_side_column_grows_with_a_wide_window(page: Page, demo_site: str, errors: list[str]) -> None: +def test_demo_the_side_column_takes_two_fifths_of_a_wide_window(page: Page, demo_site: str, errors: list[str]) -> None: page.set_viewport_size({"width": 1920, "height": 900}) page.goto(demo_site) + layout: typing.Final = page.locator(".layout").bounding_box() box: typing.Final = page.locator(".layout > aside").bounding_box() + assert layout is not None assert box is not None - assert box["width"] == pytest.approx(1920 * 0.32, abs=1) + assert box["width"] == pytest.approx((layout["width"] - 24) * 0.4, abs=1) + assert errors == [] + + +def _left(element: Locator) -> float: + box: typing.Final = element.bounding_box() + assert box is not None + return box["x"] + + +def test_demo_service_rows_line_up_with_and_without_a_pick(page: Page, demo_site: str, errors: list[str]) -> None: + page.goto(f"{demo_site}#shop/web=1.9.0") + expect(_demo_service(page, "shop/web").locator(".chip")).to_be_visible() + + names: typing.Final = [ + _left(_demo_service(page, project).locator(".name")) for project in ("shop/admin", "shop/api") + ] + states: typing.Final = [ + _left(_demo_service(page, project).locator("summary .warn").first) + for project in ("shop/api", "shop/web", "shop/worker") + ] + + assert names[0] == pytest.approx(names[1], abs=0.5) + assert max(states) - min(states) < 0.5, states assert errors == []