From 9ca54020acc402472cfd76fe5ed65d1564743761 Mon Sep 17 00:00:00 2001
From: Jay V <air@live.ca>
Date: Thu, 10 Jul 2025 20:16:34 -0400
Subject: [PATCH] docs: share page mobile bugs

---
 .../components/share/content-bash.module.css  |  9 +---
 .../components/share/content-code.module.css  |  1 -
 .../components/share/content-error.module.css |  1 -
 .../share/content-markdown.module.css         |  1 -
 .../components/share/content-text.module.css  |  1 -
 .../web/src/components/share/part.module.css  | 48 +++++++++++++++++--
 packages/web/src/components/share/part.tsx    | 10 ++--
 7 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/packages/web/src/components/share/content-bash.module.css b/packages/web/src/components/share/content-bash.module.css
index 0d7453156..0915282d7 100644
--- a/packages/web/src/components/share/content-bash.module.css
+++ b/packages/web/src/components/share/content-bash.module.css
@@ -1,10 +1,5 @@
 .root {
-  width: 100%;
-  max-width: var(--sm-tool-width);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
+  display: contents;
 
   [data-slot="expand-button"] {
     flex: 0 0 auto;
@@ -13,8 +8,6 @@
   }
 
   [data-slot="body"] {
-    display: flex;
-    flex-direction: column;
     border: 1px solid var(--sl-color-divider);
     border-radius: 0.25rem;
     overflow: hidden;
diff --git a/packages/web/src/components/share/content-code.module.css b/packages/web/src/components/share/content-code.module.css
index 6ad138b5f..ec159d646 100644
--- a/packages/web/src/components/share/content-code.module.css
+++ b/packages/web/src/components/share/content-code.module.css
@@ -1,5 +1,4 @@
 .root {
-  max-width: var(--md-tool-width);
   border: 1px solid var(--sl-color-divider);
   background-color: var(--sl-color-bg-surface);
   border-radius: 0.25rem;
diff --git a/packages/web/src/components/share/content-error.module.css b/packages/web/src/components/share/content-error.module.css
index 70645d6b4..6303be633 100644
--- a/packages/web/src/components/share/content-error.module.css
+++ b/packages/web/src/components/share/content-error.module.css
@@ -7,7 +7,6 @@
   align-items: flex-start;
   gap: 1rem;
   align-self: flex-start;
-  max-width: var(--md-tool-width);
 
   [data-section="content"] {
     pre {
diff --git a/packages/web/src/components/share/content-markdown.module.css b/packages/web/src/components/share/content-markdown.module.css
index da1aa1128..0e6b83620 100644
--- a/packages/web/src/components/share/content-markdown.module.css
+++ b/packages/web/src/components/share/content-markdown.module.css
@@ -7,7 +7,6 @@
   align-items: flex-start;
   gap: 1rem;
   align-self: flex-start;
-  max-width: var(--md-tool-width);
 
   &[data-highlight="true"] {
     background-color: var(--sl-color-blue-low);
diff --git a/packages/web/src/components/share/content-text.module.css b/packages/web/src/components/share/content-text.module.css
index f8d0b0b93..203f0d06d 100644
--- a/packages/web/src/components/share/content-text.module.css
+++ b/packages/web/src/components/share/content-text.module.css
@@ -8,7 +8,6 @@
   align-items: flex-start;
   gap: 1rem;
   align-self: flex-start;
-  max-width: var(--md-tool-width);
   font-size: 0.875rem;
 
   &[data-compact] {
diff --git a/packages/web/src/components/share/part.module.css b/packages/web/src/components/share/part.module.css
index bf843bc0d..df8102f5d 100644
--- a/packages/web/src/components/share/part.module.css
+++ b/packages/web/src/components/share/part.module.css
@@ -101,10 +101,7 @@
   }
 
   [data-component="content"] {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    flex-grow: 1;
+    min-width: 0;
   }
 
   [data-component="spacer"] {
@@ -117,6 +114,24 @@
     color: var(--sl-color-text-dimmed);
   }
 
+  [data-component="user-text"] {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-grow: 1;
+    max-width: var(--md-tool-width);
+  }
+
+  [data-component="assistant-text"] {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-grow: 1;
+    max-width: var(--md-tool-width);
+  }
+
   [data-component="step-start"] {
     display: flex;
     flex-direction: column;
@@ -195,6 +210,31 @@
     align-items: flex-start;
     gap: 0.375rem;
     padding-bottom: 1rem;
+
+    &[data-tool="bash"] {
+      max-width: var(--sm-tool-width);
+    }
+
+    &[data-tool="error"] {
+      max-width: var(--md-tool-width);
+    }
+
+    &[data-tool="read"],
+    &[data-tool="edit"],
+    &[data-tool="list"],
+    &[data-tool="glob"],
+    &[data-tool="grep"],
+    &[data-tool="write"],
+    &[data-tool="webfetch"] {
+      [data-component="tool-result"] {
+        max-width: var(--sm-tool-width);
+      }
+    }
+    &[data-tool="edit"] {
+      [data-component="tool-result"] {
+        max-width: var(--lg-tool-width);
+      }
+    }
   }
 
   [data-component="tool-title"] {
diff --git a/packages/web/src/components/share/part.tsx b/packages/web/src/components/share/part.tsx
index fbc1ae16d..e155332ad 100644
--- a/packages/web/src/components/share/part.tsx
+++ b/packages/web/src/components/share/part.tsx
@@ -126,13 +126,13 @@ export function Part(props: PartProps) {
       </div>
       <div data-component="content">
         {props.message.role === "user" && props.part.type === "text" && (
-          <>
+          <div data-component="user-text">
             <ContentText text={props.part.text} expand={props.last} />
             <Spacer />
-          </>
+          </div>
         )}
         {props.message.role === "assistant" && props.part.type === "text" && (
-          <>
+          <div data-component="assistant-text">
             <ContentMarkdown expand={props.last} text={props.part.text} />
             {props.last && props.message.role === "assistant" && props.message.time.completed && (
               <Footer
@@ -144,7 +144,7 @@ export function Part(props: PartProps) {
               </Footer>
             )}
             <Spacer />
-          </>
+          </div>
         )}
         {props.message.role === "user" && props.part.type === "file" && (
           <div data-component="attachment">
@@ -159,7 +159,7 @@ export function Part(props: PartProps) {
           </div>
         )}
         {props.part.type === "tool" && props.part.state.status === "error" && (
-          <div data-component="tool">
+          <div data-component="tool" data-tool="error">
             <ContentError>{formatErrorString(props.part.state.error)}</ContentError>
           </div>
         )}