diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 61b14a8..c22f9d9 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1,17 +1,19 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { DataManager, ConnectionStatus } from "../data";
-import { State, AgentMessage } from "../types";
-import "./sketch-container-status";
-import "./sketch-view-mode-select";
-import "./sketch-network-status";
-import "./sketch-timeline";
-import "./sketch-chat-input";
-import "./sketch-diff-view";
-import "./sketch-charts";
-import "./sketch-terminal";
-import { SketchDiffView } from "./sketch-diff-view";
+import { ConnectionStatus, DataManager } from "../data";
+import { AgentMessage, State } from "../types";
 import { aggregateAgentMessages } from "./aggregateAgentMessages";
+import "./sketch-charts";
+import "./sketch-chat-input";
+import "./sketch-container-status";
+import "./sketch-diff-view";
+import { SketchDiffView } from "./sketch-diff-view";
+import "./sketch-network-status";
+import "./sketch-terminal";
+import "./sketch-timeline";
+import "./sketch-view-mode-select";
+
+import { createRef, ref } from "lit/directives/ref.js";
 
 type ViewMode = "chat" | "diff" | "charts" | "terminal";
 
@@ -41,31 +43,53 @@
         sans-serif;
       color: #333;
       line-height: 1.4;
-      min-height: 100vh;
+      height: 100vh;
       width: 100%;
       position: relative;
       overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
     }
 
     /* Top banner with combined elements */
-    .top-banner {
+    #top-banner {
       display: flex;
+      align-self: flex-start;
       justify-content: space-between;
       align-items: center;
       padding: 5px 20px;
       margin-bottom: 0;
       border-bottom: 1px solid #eee;
       gap: 10px;
-      position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background: white;
-      z-index: 100;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       max-width: 100%;
     }
 
+    /* View mode container styles - mirroring timeline.css structure */
+    #view-container {
+      align-self: stretch;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    #view-container-inner {
+      max-width: 1200px;
+      margin: 0 auto;
+      position: relative;
+      padding-bottom: 10px;
+      padding-top: 10px;
+    }
+
+    #chat-input {
+      align-self: flex-end;
+      width: 100%;
+      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    }
+
     .banner-title {
       font-size: 18px;
       font-weight: 600;
@@ -88,19 +112,8 @@
       text-overflow: ellipsis;
     }
 
-    /* View mode container styles - mirroring timeline.css structure */
-    .view-container {
-      max-width: 1200px;
-      margin: 0 auto;
-      margin-top: 65px; /* Space for the top banner */
-      margin-bottom: 90px; /* Increased space for the chat input */
-      position: relative;
-      padding-bottom: 15px; /* Additional padding to prevent clipping */
-      padding-top: 15px; /* Add padding at top to prevent content touching the header */
-    }
-
     /* Allow the container to expand to full width in diff mode */
-    .view-container.diff-active {
+    #view-container.diff-active {
       max-width: 100%;
     }
 
@@ -348,7 +361,7 @@
     // Wait for DOM update to complete
     this.updateComplete.then(() => {
       // Update active view
-      const viewContainer = this.shadowRoot?.querySelector(".view-container");
+      const viewContainer = this.shadowRoot?.querySelector("#view-container");
       const chatView = this.shadowRoot?.querySelector(".chat-view");
       const diffView = this.shadowRoot?.querySelector(".diff-view");
       const chartView = this.shadowRoot?.querySelector(".chart-view");
@@ -490,9 +503,11 @@
     }
   }
 
+  private scrollContainerRef = createRef<HTMLElement>();
+
   render() {
     return html`
-      <div class="top-banner">
+      <div id="top-banner">
         <div class="title-container">
           <h1 class="banner-title">sketch</h1>
           <h2 id="chatTitle" class="chat-title">${this.title}</h2>
@@ -522,36 +537,43 @@
         </div>
       </div>
 
-      <div class="view-container">
-        <div class="chat-view ${this.viewMode === "chat" ? "view-active" : ""}">
-          <sketch-timeline
-            .messages=${this.messages}
-            .scrollContainer=${this}
-          ></sketch-timeline>
-        </div>
-
-        <div class="diff-view ${this.viewMode === "diff" ? "view-active" : ""}">
-          <sketch-diff-view
-            .commitHash=${this.currentCommitHash}
-          ></sketch-diff-view>
-        </div>
-
-        <div
-          class="chart-view ${this.viewMode === "charts" ? "view-active" : ""}"
-        >
-          <sketch-charts .messages=${this.messages}></sketch-charts>
-        </div>
-
-        <div
-          class="terminal-view ${this.viewMode === "terminal"
-            ? "view-active"
-            : ""}"
-        >
-          <sketch-terminal></sketch-terminal>
+      <div id="view-container" ${ref(this.scrollContainerRef)}>
+        <div id="view-container-inner">
+          <div
+            class="chat-view ${this.viewMode === "chat" ? "view-active" : ""}"
+          >
+            <sketch-timeline
+              .messages=${this.messages}
+              .scrollContainer=${this.scrollContainerRef}
+            ></sketch-timeline>
+          </div>
+          <div
+            class="diff-view ${this.viewMode === "diff" ? "view-active" : ""}"
+          >
+            <sketch-diff-view
+              .commitHash=${this.currentCommitHash}
+            ></sketch-diff-view>
+          </div>
+          <div
+            class="chart-view ${this.viewMode === "charts"
+              ? "view-active"
+              : ""}"
+          >
+            <sketch-charts .messages=${this.messages}></sketch-charts>
+          </div>
+          <div
+            class="terminal-view ${this.viewMode === "terminal"
+              ? "view-active"
+              : ""}"
+          >
+            <sketch-terminal></sketch-terminal>
+          </div>
         </div>
       </div>
 
-      <sketch-chat-input @send-chat="${this._sendChat}"></sketch-chat-input>
+      <div id="chat-input">
+        <sketch-chat-input @send-chat="${this._sendChat}"></sketch-chat-input>
+      </div>
     `;
   }
 
diff --git a/webui/src/web-components/sketch-chat-input.ts b/webui/src/web-components/sketch-chat-input.ts
index 74e462f..257c583 100644
--- a/webui/src/web-components/sketch-chat-input.ts
+++ b/webui/src/web-components/sketch-chat-input.ts
@@ -13,14 +13,9 @@
   static styles = css`
     /* Chat styles - exactly matching timeline.css */
     .chat-container {
-      position: fixed;
-      bottom: 0;
-      left: 0;
       width: 100%;
       background: #f0f0f0;
       padding: 15px;
-      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-      z-index: 1000;
       min-height: 40px; /* Ensure minimum height */
     }
 
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