feat(desktop): improve markdown heading spacing in session timeline (#34738)

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-top: 28px;
-    margin-bottom: 24px;
+    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-top: 24px;
-    margin-bottom: 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-top: 20px;
-    margin-bottom: 24px;
+    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-top: 20px;
-    margin-bottom: 24px;
+    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;

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: {},
     },
   }))
 

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