From 40d0916f735b9452fe7468b1feb56062d4784f17 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Date: Mon, 8 Jun 2026 17:18:02 -0700
Subject: [PATCH] =?UTF-8?q?fix(desktop):=20composer=E2=86=94timeline=20par?=
 =?UTF-8?q?ity=20round=203=20=E2=80=94=20text=20color,=20tables,=20code-bl?=
 =?UTF-8?q?ock=20fixups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Editor wrapper gains text-foreground/90 to match markdown.tsx outer
  default-variant wrapper. Default paragraph text is now the same shade
  in composer and timeline.
- Add table/td/th rules + table adjacency (mt-3.5) mirroring timeline
  tokens. StarterKit has no Table extension so they only fire via raw
  HTML paste — defensive parity. overflow-x-auto requires a block-mode
  container which we can't add without a NodeView; intentionally omitted.
- Drop the rounded-none/bg-transparent/p-0 extras on pre code that
  weren't in CODE_BLOCK_CLASS — parent <pre> reset is enough.
- Extend the p+ul/p+ol companion to cover div+ul/div+ol, matching the
  timeline's [&>div+ul]:mt-1.5 [&>div+ol]:mt-1.5 rule. No-op in the
  composer today (no block-media divs) but token-for-token.
- code-block-lines marker class from CODE_BLOCK_CLASS is intentionally
  omitted: it's a custom CSS class (not a Tailwind utility, so @apply
  won't compile) and its rules only target [data-line] children
  produced by Shiki tokenization, which the composer never has. Adding
  the literal class to the <code> requires a TipTap codeBlock node
  override — flagged for a follow-up.
---
 desktop/src/shared/styles/globals.css | 37 +++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/desktop/src/shared/styles/globals.css b/desktop/src/shared/styles/globals.css
index fa186a2b4..77b6b5c11 100644
--- a/desktop/src/shared/styles/globals.css
+++ b/desktop/src/shared/styles/globals.css
@@ -230,7 +230,7 @@
  * composer height stays static until additional items are added.
  */
 .rich-text-composer .tiptap {
-  @apply text-sm leading-7 outline-none;
+  @apply text-sm leading-7 text-foreground/90 outline-none;
   min-height: 1.75rem; /* one line at leading-7 (28px) */
 }
 
@@ -271,9 +271,11 @@
   @apply mt-4;
 }
 
-/* Lists immediately after a paragraph hug a little tighter. */
+/* Lists immediately after a paragraph or block-media div hug a little tighter. */
 .rich-text-composer .tiptap > p + ul,
-.rich-text-composer .tiptap > p + ol {
+.rich-text-composer .tiptap > p + ol,
+.rich-text-composer .tiptap > div + ul,
+.rich-text-composer .tiptap > div + ol {
   @apply mt-1.5;
 }
 
@@ -330,8 +332,13 @@
 }
 .rich-text-composer .tiptap pre code {
   /* Mirrors CODE_BLOCK_CLASS in markdown.tsx so a pasted/markdown-rendered
-   * code block looks identical in the composer and in the timeline. */
-  @apply block min-w-full whitespace-pre rounded-none bg-transparent p-0 font-mono text-[13px] leading-6 text-foreground;
+   * code block looks identical in the composer and in the timeline. The
+   * `code-block-lines` marker class from CODE_BLOCK_CLASS is intentionally
+   * omitted — its rules (lines ~478-498 of this file) only target
+   * `[data-line]` children produced by Shiki tokenization, which the
+   * composer never has. The class is also a custom CSS class, not a
+   * Tailwind utility, so `@apply code-block-lines` won't compile. */
+  @apply block min-w-full whitespace-pre font-mono text-[13px] leading-6 text-foreground;
 }
 
 /* Blockquote. */
@@ -380,6 +387,26 @@
   @apply border-border/80;
 }
 
+/* Tables. Timeline wraps the <table> in a `data-table-block` div with the
+ * overflow/border/rounded chrome; TipTap's StarterKit has no table extension,
+ * so a real table would only appear via raw HTML paste. We mirror the
+ * timeline tokens defensively — chrome applied directly to the <table>
+ * (overflow-x-auto requires a block-display container we can't add here
+ * without a NodeView, so it's intentionally omitted). */
+.rich-text-composer .tiptap table {
+  @apply w-full border-collapse rounded-2xl border border-border/70 text-left text-sm;
+}
+.rich-text-composer .tiptap td {
+  @apply border-t border-border/70 px-3 py-2 align-top;
+}
+.rich-text-composer .tiptap th {
+  @apply bg-muted/60 px-3 py-2 font-semibold text-foreground;
+}
+.rich-text-composer .tiptap > * + table,
+.rich-text-composer .tiptap > table + * {
+  @apply mt-3.5;
+}
+
 .rich-text-composer .tiptap .mention-highlight {
   display: inline-block;
   border-radius: 4px;