fix(UI): resolve rymnc comments

Author: Meyanis95

src/components/AnchorNav.astro

@@ -15,16 +15,18 @@ const { tabs, ariaLabel = 'Section navigation' } = Astro.props;
 ---
 
 <nav class="anchor-nav" aria-label={ariaLabel}>
-  <div class="container anchor-nav-inner">
-    {tabs.map((t) => (
-      <a href={t.href}>
-        {t.iconSvg && <span class="ic" set:html={t.iconSvg} />}
-        <span class="lbl">
-          {t.label}
-          {typeof t.count === 'number' && <span class="count">({t.count})</span>}
-        </span>
-      </a>
-    ))}
+  <div class="container">
+    <div class="anchor-nav-inner">
+      {tabs.map((t) => (
+        <a href={t.href}>
+          {t.iconSvg && <span class="ic" set:html={t.iconSvg} />}
+          <span class="lbl">
+            {t.label}
+            {typeof t.count === 'number' && <span class="count">({t.count})</span>}
+          </span>
+        </a>
+      ))}
+    </div>
   </div>
 </nav>
 
@@ -41,9 +43,14 @@ const { tabs, ariaLabel = 'Section navigation' } = Astro.props;
     overflow-x: auto;
     flex-wrap: wrap;
     scrollbar-width: none;
+    /* Bleed the row 0.9rem into the container padding on both sides so
+       the link text — inset by its own 0.9rem padding — aligns to the
+       container edge. Done on the row (not a:first-child) so EVERY
+       wrapped row's leading item aligns, not just the first. */
+    margin-left: -0.9rem;
+    margin-right: -0.9rem;
   }
   .anchor-nav-inner::-webkit-scrollbar { display: none; }
-  .anchor-nav-inner > a:first-child { margin-left: -0.9rem; }
 
   .anchor-nav a {
     display: inline-flex;

src/components/PageHeader.astro

@@ -59,7 +59,7 @@ const { breadcrumbs = [], title, lede, ledeBullets, metaRow, pills = [], centere
 
 <style>
   .page-header {
-    padding: 4.5rem 0 3rem;
+    padding: 4.5rem 0 2rem;
     background: radial-gradient(ellipse 60% 50% at 90% 10%, rgba(49, 130, 206, 0.05), transparent 60%);
   }
   /* Centered variant — used by blog post details (per 2026-05-22
@@ -113,6 +113,10 @@ const { breadcrumbs = [], title, lede, ledeBullets, metaRow, pills = [], centere
     text-wrap: balance;
     min-width: 0;
   }
+  /* No lede/pills/metaRow after the title (e.g. the use-cases index) —
+     drop the title's bottom margin so it doesn't stack with the header
+     padding into a dead gap above the content. */
+  .page-header h1:last-child { margin-bottom: 0; }
   .page-header .lede {
     font-size: 1.0625rem;
     line-height: 1.65;

src/layouts/DetailPageLayout.astro

@@ -42,7 +42,7 @@ const { title, pageTitle, description, current, breadcrumbs, lede, ledeBullets,
 
 <style>
   .detail {
-    padding: 3rem 0 4rem;
+    padding: 1.5rem 0 4rem;
   }
   .detail-grid {
     display: grid;

src/pages/approaches/[slug].astro

@@ -1056,11 +1056,17 @@ function maturityTone(m?: string): 'strong' | 'mid' | 'plain' | 'muted' {
   .block-bad h5  { color: var(--color-warning-strong); }
 
   /* ─── Tables (scoped CSS can't pierce set:html, use :global) ─ */
+  /* The table-wrap is also `.prose`, which caps body text at 70ch for
+     readability. A data table is not running prose — let it fill the
+     full column so its right edge lines up with the section headings
+     and option cards instead of stopping ~100px short. Scoped class
+     (gets an astro-cid attr) outweighs the global .prose rule. */
   .table-wrap {
     overflow-x: auto;
     margin: 1rem 0;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
+    max-width: none;
   }
   :global(.approach-main .prose table) {
     width: 100%;

src/pages/blog/index.astro

@@ -78,7 +78,10 @@ const today = new Date().toISOString().slice(0, 10);
   .post-list {
     list-style: none;
     padding: 0;
-    margin: 2rem 0 4rem;
+    /* No top margin — the shared .list-body already supplies the 2rem
+       top padding. A margin here doubled it, leaving a ~96px gap under
+       the header. */
+    margin: 0 0 4rem;
     display: flex;
     flex-direction: column;
     gap: 1px;

src/styles/globals.css

@@ -232,6 +232,15 @@ section.block {
   max-width: 70ch;
 }
 .prose > * + * { margin-top: 1.1em; }
+/* The first element of a prose block never gets top spacing or a
+   section-break divider — those belong *between* sections. Without this
+   a leading <h2> (margin-top + padding-top + border-top) drops ~100px of
+   dead space and a stray rule directly under the page lede. */
+.prose > :first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
 .prose h1 {
   font-family: var(--font-sans);
   font-size: clamp(1.75rem, 3vw, 2.1rem);