diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 37bd4ce..bad9e43 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -72,6 +72,9 @@
   @property()
   firstMessageIndex: number = 0;
 
+  @property({ type: Boolean, reflect: true, attribute: "compactpadding" })
+  compactPadding: boolean = false;
+
   @state()
   showInfo: boolean = false;
 
@@ -120,6 +123,15 @@
       text-overflow: ellipsis;
     }
 
+    :host([compactpadding]) .message-bubble-container {
+      max-width: 100%;
+    }
+
+    :host([compactpadding]) .message-metadata-left,
+    :host([compactpadding]) .message-metadata-right {
+      display: none;
+    }
+
     .user .message-bubble-container {
       justify-content: flex-end;
     }
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 77aff74..1f1182e 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -51,6 +51,9 @@
   @property({ attribute: false })
   state: State | null = null;
 
+  @property({ attribute: false })
+  compactPadding: boolean = false;
+
   // Track initial load completion for better rendering control
   @state()
   private isInitialLoadComplete: boolean = false;
@@ -123,6 +126,10 @@
       width: 100%;
       height: 100%;
     }
+
+    :host([compactpadding]) #scroll-container {
+      padding-left: 0;
+    }
     #jump-to-latest {
       display: none;
       position: fixed;
@@ -1047,6 +1054,7 @@
                       .open=${false}
                       .firstMessageIndex=${this.firstMessageIndex}
                       .state=${this.state}
+                      .compactPadding=${this.compactPadding}
                     ></sketch-timeline-message>`;
                   },
                 )