Move the horizontal scroller demo. Make the dots in the demo disappear without reflow

src/back/routes/horizontal-scroller-demo.css

@@ -1,24 +0,0 @@
-.bignum {
-	font-size: 60px;
-	background-color: aquamarine;
-	color: hsl(159.8, 100%, 39.9%);
-	width: 150px;
-	height: 200px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.horizontal-scroller {
-	.next-button,
-	.prev-button {
-		pointer-events: none;
-		opacity: 0.5;
-	}
-
-	&.has-next .next-button,
-	&.has-prev .prev-button {
-		pointer-events: all;
-		opacity: 1;
-	}
-}

src/back/routes/horizontal-scroller-demo.page.tsx

@@ -1,90 +0,0 @@
-import type { Context } from "koa";
-import { TempstreamJSX } from "tempstream";
-import { Page } from "@sealcode/sealgen";
-import html from "../html.js";
-import { horizontalScroller } from "./common/horizontal-scroller/horizontal-scroller.js";
-
-export const actionName = "HorizontalScrollerDemo";
-
-export default new (class HorizontalScrollerDemoPage extends Page {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	async canAccess(_: Context) {
-		return { canAccess: true, message: "" };
-	}
-
-	async render(ctx: Context) {
-		return html(
-			ctx,
-			"HorizontalScrollerDemo",
-			<div>
-				<h2>Always scrolls + has buttons</h2>
-				{horizontalScroller({
-					elements: [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13].map((n) => (
-						<div class="bignum">{n}</div>
-					)),
-					render: async ({ scroller, markers }) => (
-						<div>
-							<div>
-								<button
-									class="prev-button"
-									type="button"
-									data-action="horizontal-scroller#scrollLeft"
-								>
-									{" "}
-									←{" "}
-								</button>
-								<button
-									class="next-button"
-									type="button"
-									data-action="horizontal-scroller#scrollRight"
-								>
-									{" "}
-									→{" "}
-								</button>
-							</div>
-							{scroller}
-							{markers}
-						</div>
-					),
-				})}
-				<h2>Sometimes doesn't scroll, then dots are hidden</h2>
-				{
-					/* HTML */ `<style>
-						.horizontal-scroller--all-visible {
-							.horizontal-scroller__markers {
-								display: none;
-							}
-						}
-					</style>`
-				}
-				{horizontalScroller({
-					elements: [1, 2, 3, 4].map((n) => <div class="bignum">{n}</div>),
-					render: async ({ scroller, markers }) => (
-						<div>
-							<div>
-								<button
-									class="prev-button"
-									type="button"
-									data-action="horizontal-scroller#scrollLeft"
-								>
-									{" "}
-									←{" "}
-								</button>
-								<button
-									class="next-button"
-									type="button"
-									data-action="horizontal-scroller#scrollRight"
-								>
-									{" "}
-									→{" "}
-								</button>
-							</div>
-							{scroller}
-							{markers}
-						</div>
-					),
-				})}
-			</div>
-		);
-	}
-})();

src/back/routes/horizontal-scroller-demo.test.ts

@@ -1,16 +0,0 @@
-import { withProdApp } from "../test_utils/with-prod-app.js";
-import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "../test_utils/webhint.js";
-import { HorizontalScrollerDemoURL } from "./urls.js";
-
-describe("HorizontalScrollerDemo webhint", () => {
-	it("doesn't crash", async function () {
-		return withProdApp(async ({ base_url, rest_api }) => {
-			await rest_api.get(HorizontalScrollerDemoURL);
-			await webhintURL(base_url + HorizontalScrollerDemoURL);
-			// alternatively you can use webhintHTML for faster but less precise scans
-			// or for scanning responses of requests that use some form of authorization:
-			// const response = await rest_api.get(HorizontalScrollerDemoURL);
-			// await webhintHTML(response);
-		});
-	}).timeout(VERY_LONG_TEST_TIMEOUT);
-});