webui: Fix message bubbles and tool calls overflow issues in timeline
On the bright side, Sketch fixed this with repeated "hey, look at that
screenshot; there's horizontal truncation." On the downside, it got
really confused by shadow dom, and the solution doesn't look clean to
me, with lots of inline CSS.
~~~~~
Fixed various overflow issues in timeline component, particularly with
handling long bash commands in shadow DOM contexts:
1. Message Bubbles:
- Added overflow constraints to message-bubble-container
- Changed max-width from 80% to 100% for better containment
- Added text-overflow: ellipsis for clean truncation
2. Tool Cards:
- Implemented manual string truncation for bash commands
- Limited display to 80 chars with ellipsis for overflowing text
- Added CSS to constrain width in all contexts
3. Shadow DOM Challenges:
- Standard CSS inheritance doesn't penetrate shadow DOM boundaries
- Component-specific styles required direct modification in render methods
- Parallel CSS and JS truncation needed for reliable overflow handling
- Multiple nested web components required coordinated width constraints
4. Global Improvements:
- Added overflow-x: hidden to parent containers
- Used box-sizing: border-box for accurate sizing
- Fixed scroll container to prevent horizontal scrolling
The primary insight was that shadow DOM isolation prevented CSS-only
solutions from working reliably. Explicit string truncation in the
component code was needed alongside careful container width management.
This pattern may need to be applied to other web components that
display potentially lengthy content.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sc937c08ac1b7766fk
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 64f3db0..3870e39 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -52,6 +52,7 @@
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
+ overflow-x: hidden;
}
/* Chat-like timeline styles */
@@ -64,8 +65,10 @@
/* Remove the vertical timeline line */
#scroll-container {
- overflow: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
padding-left: 1em;
+ max-width: 100%;
}
#jump-to-latest {
display: none;