commit 4097e5357b93d80297177ee1c7ebf736e33a623d
author Pokey Rule <755842+pokey@users.noreply.github.com> Thu Apr 24 18:55:28 2025 +0100
committer Pokey Rule <755842+pokey@users.noreply.github.com> Thu Apr 24 19:06:40 2025 +0100
tree b8fd43dcf1c6310ab0c2a7c34bb7c1f503136f9d
parent 563d6b35a841a9dbafcaa57bf247fe9f9bf5e841

webui: Cleanup css and fix layout

- Fixes #13

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 e2c8ee7..15df383 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -4,6 +4,7 @@
 import { customElement, property, state } from "lit/decorators.js";
 import { AgentMessage } from "../types";
 import "./sketch-timeline-message";
+import { Ref } from "lit/directives/ref";
 
 @customElement("sketch-timeline")
 export class SketchTimeline extends LitElement {
@@ -15,7 +16,7 @@
   private scrollingState: "pinToLatest" | "floating" = "pinToLatest";
 
   @property({ attribute: false })
-  scrollContainer: HTMLElement;
+  scrollContainer: Ref<HTMLElement>;
 
   static styles = css`
     /* Hide views initially to prevent flash of content */
@@ -100,8 +101,8 @@
    * Scroll to the bottom of the timeline
    */
   private scrollToBottom(): void {
-    this.scrollContainer?.scrollTo({
-      top: this.scrollContainer?.scrollHeight,
+    this.scrollContainer.value?.scrollTo({
+      top: this.scrollContainer.value?.scrollHeight,
       behavior: "smooth",
     });
   }
@@ -117,7 +118,10 @@
       }
     }
     if (changedProperties.has("scrollContainer")) {
-      this.scrollContainer?.addEventListener("scroll", this._handleScroll);
+      this.scrollContainer.value?.addEventListener(
+        "scroll",
+        this._handleScroll,
+      );
     }
   }
 
@@ -140,9 +144,9 @@
   private _handleScroll(event) {
     const isAtBottom =
       Math.abs(
-        this.scrollContainer.scrollHeight -
-          this.scrollContainer.clientHeight -
-          this.scrollContainer.scrollTop,
+        this.scrollContainer.value.scrollHeight -
+          this.scrollContainer.value.clientHeight -
+          this.scrollContainer.value.scrollTop,
       ) <= 1;
     if (isAtBottom) {
       this.scrollingState = "pinToLatest";
@@ -161,7 +165,8 @@
       "showCommitDiff",
       this._handleShowCommitDiff as EventListener,
     );
-    this.scrollContainer?.addEventListener("scroll", this._handleScroll);
+
+    this.scrollContainer.value?.addEventListener("scroll", this._handleScroll);
   }
 
   // See https://lit.dev/docs/components/lifecycle/
@@ -174,7 +179,10 @@
       this._handleShowCommitDiff as EventListener,
     );
 
-    this.scrollContainer?.removeEventListener("scroll", this._handleScroll);
+    this.scrollContainer.value?.removeEventListener(
+      "scroll",
+      this._handleScroll,
+    );
   }
 
   // messageKey uniquely identifes a AgentMessage based on its ID and tool_calls, so