From 3136b1ba9779c91f74cd8ceabc8574d84880a0c9 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Wed, 1 Jul 2026 14:39:12 +0200
Subject: [PATCH] feat(desktop): improve markdown heading spacing in session
 timeline (#34738)

---
 .../session-ui/src/components/markdown.css    | 24 +++++++++----------
 .../timeline-playground.stories.tsx           |  4 +++-
 packages/storybook/.storybook/preview.tsx     | 12 ++++++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/session-ui/src/components/markdown.css b/packages/session-ui/src/components/markdown.css
index 577b68dadc..214cc479df 100644
--- a/packages/session-ui/src/components/markdown.css
+++ b/packages/session-ui/src/components/markdown.css
@@ -35,8 +35,8 @@
     font-size: 17px;
     color: var(--v2-text-text-base);
     font-weight: 600;
-    margin-top: 0px;
-    margin-bottom: 24px;
+    margin-top: 28px;
+    margin-bottom: 12px;
     line-height: var(--line-height-large);
   }
 
@@ -44,8 +44,8 @@
     font-size: 15px;
     color: var(--v2-text-text-base);
     font-weight: 600;
-    margin-top: 0px;
-    margin-bottom: 24px;
+    margin-top: 24px;
+    margin-bottom: 10px;
     line-height: var(--line-height-large);
   }
 
@@ -53,8 +53,8 @@
     font-size: 13px;
     color: var(--v2-text-text-base);
     font-weight: var(--font-weight-medium);
-    margin-top: 0px;
-    margin-bottom: 24px;
+    margin-top: 20px;
+    margin-bottom: 8px;
     line-height: var(--line-height-large);
   }
 
@@ -64,8 +64,8 @@
     font-size: 13px;
     color: var(--v2-text-text-muted);
     font-weight: var(--font-weight-medium);
-    margin-top: 0px;
-    margin-bottom: 24px;
+    margin-top: 20px;
+    margin-bottom: 8px;
     line-height: var(--line-height-large);
   }
 
@@ -145,7 +145,7 @@
   /* Blockquotes */
   blockquote {
     border-left: 0.5px solid var(--v2-border-border-base);
-    margin: 1.5rem 0;
+    margin: 1rem 0;
     padding-left: 0.5rem;
     color: var(--v2-text-text-muted);
     font-style: normal;
@@ -155,7 +155,7 @@
   hr {
     border: none;
     height: 0;
-    margin: 40px 0;
+    margin: 32px 0;
   }
 
   .shiki {
@@ -213,7 +213,7 @@
 
   pre {
     margin-top: 12px;
-    margin-bottom: 32px;
+    margin-bottom: 24px;
     overflow: auto;
 
     scrollbar-width: none;
@@ -253,7 +253,7 @@
   table {
     width: 100%;
     border-collapse: collapse;
-    margin: 24px 0;
+    margin: 16px 0;
     font-size: var(--font-size-base);
     display: block;
     overflow-x: auto;
diff --git a/packages/session-ui/src/components/timeline-playground.stories.tsx b/packages/session-ui/src/components/timeline-playground.stories.tsx
index 491ba2063c..9a959e30d5 100644
--- a/packages/session-ui/src/components/timeline-playground.stories.tsx
+++ b/packages/session-ui/src/components/timeline-playground.stories.tsx
@@ -1221,7 +1221,9 @@ function Playground() {
     message: { [session().id]: state.messages },
     part: state.parts,
     provider: {
-      all: [{ id: "anthropic", models: { "claude-sonnet-4-20250514": { name: "Claude Sonnet" } } }],
+      all: new Map([["anthropic", { id: "anthropic", models: { "claude-sonnet-4-20250514": { name: "Claude Sonnet" } } }]]),
+      connected: ["anthropic"],
+      default: {},
     },
   }))
 
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
index 76fb3abec9..7c13eb979d 100644
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -44,6 +44,17 @@ const Scheme = (props: { value?: unknown }) => {
   return null
 }
 
+const NewLayout = () => {
+  // Mirror app.tsx BodyDesignClass so stories render with v2 (new-layout) styles
+  // instead of the legacy `body:not([data-new-layout])` branch.
+  onMount(() => {
+    document.body.toggleAttribute("data-new-layout", true)
+    document.body.classList.add("font-(family-name:--font-family-text)", "text-[13px]", "font-[440]")
+    document.body.classList.remove("text-12-regular")
+  })
+  return null
+}
+
 const frame = createJSXDecorator((Story, context) => {
   const override = context.parameters?.themes?.themeOverride
   const selected = context.globals?.theme
@@ -54,6 +65,7 @@ const frame = createJSXDecorator((Story, context) => {
       <Font />
       <ThemeProvider>
         <Scheme value={scheme} />
+        <NewLayout />
         <DialogProvider>
           <MarkedProvider>
             <div