From 069f9277d10ae0ca2c4d7e82b32cc13ce1716229 Mon Sep 17 00:00:00 2001
From: "claude@clouddev1" <claude-clouddev1@oliversturm.ch>
Date: Thu, 11 Jun 2026 19:24:21 +0000
Subject: [PATCH] fix(website): landing card links + keep inline code from
 breaking mid-token

- Add a teal 'more' link pinned to each landing feature card's
  bottom-right, pointing at the relevant doc page (modes, the SQL echo,
  undo & history, query plans, the assistive editor).
- Stop short inline code (flags like --all-rows) from breaking after a
  hyphen: white-space:nowrap on inline code only; block code in <pre>
  is unaffected and still wraps/scrolls.
---
 website/src/content/docs/index.mdx | 10 +++++++++
 website/src/styles/global.css      | 33 ++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index 2bcbf9d..12e0263 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -31,22 +31,32 @@ SQL.
 	<Card title="Two ways to work" icon="seti:db">
 		Start in **simple mode** — a friendly, keyword-based command language —
 		and switch to **advanced mode** for standard SQL whenever you are ready.
+
+		<a class="card-more" href="/getting-started/modes/">Modes →</a>
 	</Card>
 	<Card title="Learn the SQL underneath" icon="open-book">
 		Run a simple-mode command in advanced mode and the playground shows you
 		the equivalent SQL, so the bridge from concepts to SQL is always visible.
+
+		<a class="card-more" href="/getting-started/modes/#seeing-the-sql-behind-a-command">Seeing the SQL →</a>
 	</Card>
 	<Card title="Safe to experiment" icon="approve-check">
 		Every change can be undone, your work is saved as you go, and you can
 		rebuild the whole database from plain, readable files.
+
+		<a class="card-more" href="/using-the-playground/undo-and-history/">Undo and history →</a>
 	</Card>
 	<Card title="See how queries run" icon="rocket">
 		Ask the playground to explain any query and it renders the database's
 		plan as an annotated tree — so indexes and scans stop being a mystery.
+
+		<a class="card-more" href="/reference/querying-and-inspecting/#query-plans">Query plans →</a>
 	</Card>
 	<Card title="Helpful as you type" icon="pencil">
 		The input field completes commands with <kbd>Tab</kbd>, highlights
 		syntax, flags mistakes before you run them, and hints what comes next.
+
+		<a class="card-more" href="/using-the-playground/the-assistive-editor/">The assistive editor →</a>
 	</Card>
 </CardGrid>
 
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 5811720..f2a4368 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -34,6 +34,39 @@
 	}
 }
 
+/* Keep short inline code from breaking mid-token. Browsers insert a break
+   opportunity after a hyphen, which splits flags like `--all-rows` across
+   lines in a narrow column. `nowrap` keeps the token intact; the inline
+   element still wraps as a whole unit to the next line if it doesn't fit, so
+   this only prevents *internal* breaks. Block code (Expressive Code, inside
+   <pre>) is excluded and wraps/scrolls as before. */
+.sl-markdown-content :not(pre) > code {
+	white-space: nowrap;
+}
+
+/* Landing feature cards: a small "more" link pinned to each card's bottom-
+   right, pointing at the relevant docs. Scoped via :has() so only cards that
+   carry the link get the flex/grow treatment (other Cards are untouched).
+   CardGrid stretches cards to equal height, so the links line up across a row. */
+.card .body:has(.card-more) {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+.card-more {
+	margin-top: auto;
+	align-self: flex-end;
+	padding-top: 0.75rem;
+	font-size: var(--sl-text-sm);
+	font-weight: 600;
+	white-space: nowrap;
+	color: var(--sl-color-text-accent);
+	text-decoration: none;
+}
+.card-more:hover {
+	text-decoration: underline;
+}
+
 /* Command prompt for simple-mode (`rdbms`) code blocks: a decorative "> "
    before each command line so consecutive commands read as distinct entered
    lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before