From 38f7703cdeb071525051ce34d08b0d32bb08feab Mon Sep 17 00:00:00 2001
From: mehfuz <mehfuz@gmail.com>
Date: Sun, 8 Nov 2026 13:52:00 -0800
Subject: [PATCH] Give the /docent get-started commands room

Steps are rows like How it works: number, title and detail on the left,
the command in its own roomy box on the right. Long commands wrap rather
than clip, and stack under the text on phones.
---
 src/pages/docent.module.css | 38 ++++++++++++++++++++-----------------
 src/pages/docent.tsx        | 12 +++++++-----
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/pages/docent.module.css b/src/pages/docent.module.css
index e8632bd..530110c 100644
--- a/src/pages/docent.module.css
+++ b/src/pages/docent.module.css
@@ -1,23 +1,31 @@
 /* /docent only: tweaks on top of home.module.css. */
 
-/* Three steps, three columns (the homepage grid is four wide). */
-.steps {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+/* Get started: rows like "How it works", the command in a roomy box of
+   its own beside each step. Long commands wrap rather than clip. */
+.stepRow {
+  align-items: center !important;
+}
+
+.stepRow .loopNum {
+  align-self: start;
+  padding-top: 5px;
+}
+
+.stepRow h3 {
+  margin: 0 0 6px !important;
 }
 
-/* The thing you type at each step: one line, scrolls rather than wraps. */
 .stepCode {
   display: block;
-  margin: 10px 0 12px;
-  padding: 10px 12px;
-  overflow-x: auto;
-  white-space: nowrap;
-  scrollbar-width: none;
+  padding: 16px 18px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.6;
   border: 1px solid var(--sl-line);
-  border-radius: 10px;
+  border-radius: 12px;
   background: var(--sl-panel);
   font-family: var(--sl-mono);
-  font-size: 0.76rem;
+  font-size: 0.86rem;
   color: var(--sl-white);
 }
 
@@ -27,11 +35,6 @@
 }
 
 @media (max-width: 640px) {
-  .steps {
-    grid-template-columns: 1fr;
-    row-gap: 32px;
-  }
-
   .lastSection {
     padding-bottom: 72px;
   }
@@ -138,7 +141,8 @@
     row-gap: 8px;
   }
 
-  .loop li p {
+  .loop li p,
+  .stepCode {
     grid-column: 2;
   }
 
diff --git a/src/pages/docent.tsx b/src/pages/docent.tsx
index 0345b2b..618adb9 100644
--- a/src/pages/docent.tsx
+++ b/src/pages/docent.tsx
@@ -331,13 +331,15 @@ export default function Docent(): ReactNode {
               <p className={styles.kicker}>Get started</p>
               <h2 className={styles.h2}>From install to a passing build.</h2>
               <p className={styles.sub}>Three things to type. docent does the rest.</p>
-              <ol className={`${styles.steps} ${local.steps}`}>
+              <ol className={local.loop}>
                 {steps.map(({ title, code, desc }, i) => (
-                  <li key={title}>
-                    <span className={styles.stepNum}>{String(i + 1).padStart(2, '0')}</span>
-                    <p className={styles.stepTitle}>{title}</p>
+                  <li key={title} className={local.stepRow}>
+                    <span className={local.loopNum}>{String(i + 1).padStart(2, '0')}</span>
+                    <div>
+                      <h3 className={styles.stepTitle}>{title}</h3>
+                      <p className={styles.stepDesc}>{desc}</p>
+                    </div>
                     <code className={local.stepCode}>{i === 0 ? installCommands[shell] : code}</code>
-                    <p className={styles.stepDesc}>{desc}</p>
                   </li>
                 ))}
               </ol>