sketch: fix Timeline messages width overflow issue
Fix issue where Timeline messages don't fit within their designated width,
causing text to overflow beyond message bubble boundaries and overlap with
other UI elements.
Root cause was that max-width constraints were not being applied properly:
- max-w-[calc(100%-160px)] Tailwind class wasn't being computed correctly
- markdown-content div was missing proper overflow-wrap and word-break CSS
- message content div was missing max-width constraints
Changes:
- Add explicit style attributes for max-width constraints on bubble containers
- Add proper word-break and overflow-wrap CSS properties to markdown content
- Update global CSS to ensure consistent word breaking behavior
- Add overflow: hidden to prevent content from overflowing containers
- Create test page to verify fix works in normal and compact padding modes
The fix ensures messages wrap properly within their containers in both normal
mode (with 160px margin) and compact padding mode (full width) while
breaking long URLs and unbreakable strings appropriately.
Fixes https://github.com/boldsoftware/sketch/issues/201
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s7eaa3905ab8c4595k
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 144f88c..a45ed5c 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -264,19 +264,48 @@
padding: 2px 4px;
overflow-x: auto;
max-width: 100%;
- word-break: break-all;
box-sizing: border-box;
+ /* Reset word breaking for code blocks - they should not wrap */
+ word-break: normal;
+ overflow-wrap: normal;
+ white-space: nowrap;
+ }
+
+ /* Ensure proper word breaking for all markdown content EXCEPT code blocks */
+ .markdown-content {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ hyphens: auto;
+ max-width: 100%;
+ }
+
+ /* Handle long URLs and unbreakable strings in text content */
+ .markdown-content a,
+ .markdown-content span:not(.code-language),
+ .markdown-content p {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
}
.markdown-content pre {
padding: 8px 12px;
margin: 0.5rem 0;
line-height: 1.4;
+ /* Ensure code blocks don't inherit word breaking */
+ word-break: normal;
+ overflow-wrap: normal;
+ white-space: nowrap;
}
.markdown-content pre code {
background: transparent;
padding: 0;
+ /* Ensure inline code in pre blocks doesn't inherit word breaking */
+ word-break: normal;
+ overflow-wrap: normal;
+ white-space: pre;
}
/* User message code styling */
@@ -295,8 +324,11 @@
position: relative;
margin: 8px 0;
border-radius: 6px;
- overflow: hidden;
+ overflow-x: auto;
+ overflow-y: hidden;
background: rgba(0, 0, 0, 0.05);
+ max-width: 100%;
+ width: 100%;
}
sketch-timeline-message .bg-blue-500 .code-block-container {
@@ -862,7 +894,7 @@
.join(" ");
const messageContentClasses = [
- "relative px-2.5 py-1.5 rounded-xl shadow-sm max-w-full w-fit min-w-min break-words word-break-words",
+ "relative px-2.5 py-1.5 rounded-xl shadow-sm min-w-min",
// User message styling
this.message?.type === "user"
? "bg-blue-500 text-white rounded-br-sm"
@@ -883,8 +915,17 @@
></div>
<!-- Message bubble -->
- <div class="${bubbleContainerClasses}">
- <div class="${messageContentClasses}" @click=${this.handleCodeCopy}>
+ <div
+ class="${bubbleContainerClasses}"
+ style="${this.compactPadding
+ ? ""
+ : "max-width: calc(100% - 160px);"}"
+ >
+ <div
+ class="${messageContentClasses}"
+ style="max-width: 100%; overflow: hidden; width: fit-content; min-width: 200px;"
+ @click=${this.handleCodeCopy}
+ >
<div class="relative">
<div
class="absolute top-1 right-1 z-10 opacity-0 hover:opacity-100 transition-opacity duration-200 flex gap-1.5"
@@ -918,6 +959,8 @@
${this.message?.content
? html`
<div
+ class="mb-0 font-sans py-0.5 select-text cursor-text text-sm leading-relaxed text-left box-border markdown-content"
+ style="max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;"
@click=${this.handleCodeCopy}
class="overflow-x-auto mb-0 font-sans py-0.5 select-text cursor-text text-sm leading-relaxed text-left min-w-[200px] box-border mx-auto markdown-content"
>