commit 4b64468e6dd5d4283c90d85a483351af11933c2f
author David Crawshaw <david@zentus.com> Thu Jun 26 17:15:10 2025 +0000
committer Autoformatter <bot@sketch.dev> Thu Jun 26 18:32:41 2025 +0000
tree 3c3721c5714d88bba7c04f292e705da339dfdbfc
parent 07b7400182aefc4153eb6617ab89a5f05f577349

webui: add compactPadding parameter to reduce message padding

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s33c29800305d4dd2k

webui/src/web-components/sketch-timeline-message.ts

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;
     }

webui/src/web-components/sketch-timeline.ts

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>`;
                   },
                 )