tree efc2dbe13a82cf2042979386bc39d159422dde71
parent 04e778cbe6955cccf56a4e52c163a1c2220ff84a
author Philip Zeyliger <philip@bold.dev> 1747002155 -0700
committer Philip Zeyliger <philip@bold.dev> 1747002155 -0700

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