From c4c3541a329b1f7be319df08f6822f49479c867d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 19 Aug 2026 15:27:59 +0000
Subject: [PATCH] Let the lede fill its column, and send the two tools to a new
 tab

Two things a reader ran into on the finished bar.

The lede stopped at 62ch while everything under it - the filter panel,
the cards, the packages - ran the full 1132px column, so the masthead
read as unfinished text rather than as the page's description. It has no
max-width now and ends exactly where the column does; measured, not
eyeballed: 154 to 1286 on all three pages, the same as the block below.
The note under it, which is part of the same masthead, loses its own
46rem for the same reason.

Playground and Docs are tools, not sibling pages: following one means
leaving the catalogue you were reading, and coming back meant the back
button. They open in a new tab now, which is what the outward arrow on
them has been promising. The three page links keep opening in place -
switching between Learn, Controls and Stack is navigation, not a
departure.

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014QKMsbCiREgnpdfVvQYsa2
---
 web/index.html | 6 ++++--
 web/stack.css  | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/index.html b/web/index.html
index 5faaaac..53bb3dc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -24,8 +24,10 @@
     <a class="family-page" href="https://abap2ui5.github.io/samples-stack/"
        title="abap2UI5/samples-stack" aria-current="page"><b>Stack</b> <span>OData, RAP and your system</span></a>
     <span class="family-spacer"></span>
-    <a class="family-tool" href="https://abap2ui5.github.io/playground/">Playground ↗</a>
-    <a class="family-tool" href="https://abap2ui5.github.io/docs/">Docs ↗</a>
+    <a class="family-tool" href="https://abap2ui5.github.io/playground/"
+       target="_blank" rel="noopener">Playground ↗</a>
+    <a class="family-tool" href="https://abap2ui5.github.io/docs/"
+       target="_blank" rel="noopener">Docs ↗</a>
   </div>
 </nav>
 <!-- family-nav:end -->
diff --git a/web/stack.css b/web/stack.css
index 0c40b4a..c1164f9 100644
--- a/web/stack.css
+++ b/web/stack.css
@@ -94,7 +94,6 @@ code {
 .lede.small { font-size: .9rem; max-width: 46rem; }
 
 .masthead .note {
-  max-width: 46rem;
   margin: .9rem 0 0;
   font-size: .85rem;
   color: var(--ink-faint);
@@ -630,8 +629,10 @@ footer p { margin: .4rem 0; }
   letter-spacing: -.02em;
 }
 
+/* No max-width: the lede is the page's description and lines up with the
+ * column under it - the search box, the cards, the rail - rather than ending
+ * two thirds of the way across and leaving the masthead looking unfinished. */
 .lede {
-  max-width: 62ch;
   margin: 0;
   color: var(--ink-soft);
   font-size: 1.03rem;
@@ -655,7 +656,6 @@ footer p { margin: .4rem 0; }
 }
 .three > h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
 .three-lede {
-  max-width: 46rem;
   margin: 0 0 1rem;
   font-size: .9rem;
   color: var(--ink-soft);