PaperClipAI/ui/artifact-directions.html

<!DOCTYPE html>
<html lang="en" class="dark" style="color-scheme: dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#18181b" />
    <title>Artifact directions — lab</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <style>
      /*
        Unlayered, for the same reason `wizard-preview.html` carries the same
        rule: index.css pins `html, body` to viewport height with
        `overflow: hidden` inside @layer base, which is right for the app shell
        and would stop this page growing to the height of its frames — a
        full-page capture would then stop at the viewport.

        Only <html> scrolls. A body that is itself a scroll container (overflow
        auto) is the nearest scrollport of everything inside it, so the sticky
        lab toolbar would stick to the body's own box — as tall as the page —
        and never stay in view.
      */
      html {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
      }
      body {
        height: auto;
        min-height: 100%;
        overflow: visible;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/artifact-directions/main.tsx"></script>
  </body>
</html>