From 3a83b9be3264b5e97140e8fcf16a08d48a0eb3fa Mon Sep 17 00:00:00 2001
From: Julkar Naen Nahian <nahian048@gmail.com>
Date: Mon, 7 Sep 2026 01:28:01 +0600
Subject: [PATCH] fix(web): put the copy button on the title's row, and call it
 "Copy .md"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button sat above the heading on a row of its own, which spent vertical
space on a control and read as a banner rather than as part of the title.

Floated rather than laid out in a flex row: the h1 it sits beside is rendered
markdown, so there is no wrapper to make a flex parent of. The title text flows
around it at every width — at 390px the longest title ("Opening and moving
between files") still has 209px on its first line and wraps cleanly below the
float, so this needs no breakpoint of its own. An earlier comment claimed there
was no room beside the h1 on a phone; measuring says otherwise.

"Copy .md" over "Copy markdown" — it names the thing the button hands you, and
takes the control from 141px to 88px, which is most of why the narrow case is
comfortable.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JGMQ49hvA936om3GQfNTAn
---
 web/CLAUDE.md                      |  2 +-
 web/src/pages/docs/[...slug].astro | 11 +++++------
 web/src/pages/docs/[slug].md.ts    |  2 +-
 web/src/scripts/copy-markdown.ts   |  2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/web/CLAUDE.md b/web/CLAUDE.md
index c77eefb..e4ab446 100644
--- a/web/CLAUDE.md
+++ b/web/CLAUDE.md
@@ -115,7 +115,7 @@ people. All of it is generated — none of it is a list to keep up to date by ha
   `.md` twins below, not the pages: what follows an entry there is an agent.
 - **A `.md` twin of every docs page**, from `src/pages/docs/[slug].md.ts`:
   `/docs/reading` is the page, `/docs/reading.md` is the markdown it was
-  rendered from. The "Copy markdown" button on each page fetches its own twin,
+  rendered from. The "Copy .md" button on each page fetches its own twin,
   so the HTML never carries a second copy of the prose. The body is served
   verbatim except for its links, which are resolved to absolute URLs through the
   same `rewriteLink` the rendered page uses — exported from
diff --git a/web/src/pages/docs/[...slug].astro b/web/src/pages/docs/[...slug].astro
index cd97ab7..6049d5a 100644
--- a/web/src/pages/docs/[...slug].astro
+++ b/web/src/pages/docs/[...slug].astro
@@ -43,13 +43,13 @@ const schema = faq?.length
   <div class="doc">
     <DocsNav current={page.id} headings={headings} />
     <main class="doc__body">
-      {/* Above the title rather than beside it: the h1 wraps to three lines on
-          a phone, and there is no room to put anything next to it. */}
+      {/* Floated rather than laid out in a row: the h1 it sits beside is
+          rendered markdown, so there is no wrapper to make a flex parent of. */}
       <div class="doctools">
         <button type="button" class="doctools__copy" data-copy-md={`/docs/${page.id}.md`}>
           <Icon name="copy" size={14} />
           <Icon name="check" size={14} />
-          <span data-copy-md-label>Copy markdown</span>
+          <span data-copy-md-label>Copy .md</span>
         </button>
       </div>
       <Content />
@@ -100,9 +100,8 @@ const schema = faq?.length
   /* Reading controls, not content — quieter than anything inside the prose, and
      sitting above the h1 rather than in the flow of it. */
   .doctools {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 14px;
+    float: right;
+    margin: 4px 0 12px 20px;
   }
 
   .doctools__copy {
diff --git a/web/src/pages/docs/[slug].md.ts b/web/src/pages/docs/[slug].md.ts
index d136b62..2130f38 100644
--- a/web/src/pages/docs/[slug].md.ts
+++ b/web/src/pages/docs/[slug].md.ts
@@ -1,7 +1,7 @@
 // The markdown behind every docs page, at the page's own URL plus `.md`:
 // /docs/reading is the page, /docs/reading.md is what it was rendered from.
 // Agents and LLMs get the source instead of parsing the HTML back into prose,
-// and the "Copy markdown" button on each page fetches its own twin.
+// and the "Copy .md" button on each page fetches its own twin.
 //
 // The body is served verbatim except for its links, which are written as
 // on-disk relative paths (`../cli.md`) so they resolve in Reader.md and on
diff --git a/web/src/scripts/copy-markdown.ts b/web/src/scripts/copy-markdown.ts
index bf4c263..f38490b 100644
--- a/web/src/scripts/copy-markdown.ts
+++ b/web/src/scripts/copy-markdown.ts
@@ -28,7 +28,7 @@ export function initCopyMarkdown() {
     clearTimeout(timer);
     timer = window.setTimeout(() => {
       button.classList.remove("is-copied");
-      if (label) label.textContent = "Copy markdown";
+      if (label) label.textContent = "Copy .md";
     }, RESET);
   });
 }