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-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index f28b1a3..1edaff2 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -60,6 +60,8 @@
flex: 1;
display: flex;
max-width: calc(100% - 160px);
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.user .message-bubble-container {
@@ -77,9 +79,11 @@
padding: 6px 10px;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
- max-width: 80%;
+ max-width: 100%;
width: fit-content;
min-width: min-content;
+ overflow-wrap: break-word;
+ word-break: break-word;
}
/* User message styling */
@@ -1098,6 +1102,28 @@
.floating-message.error {
background-color: rgba(220, 53, 69, 0.9);
}
+
+ /* Style for code, pre elements, and tool components to ensure proper wrapping/truncation */
+ pre, code, sketch-tool-calls, sketch-tool-card, sketch-tool-card-bash {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+ }
+
+ /* Special rule for the message content container */
+ .message-content {
+ max-width: 100% !important;
+ overflow: hidden !important;
+ }
+
+ /* Ensure tool call containers don't overflow */
+ ::slotted(sketch-tool-calls) {
+ max-width: 100%;
+ width: 100%;
+ overflow-wrap: break-word;
+ word-break: break-word;
+ }
`;
document.head.appendChild(floatingMessageStyles);