From b14e99ff24a689403d4f083f386bd2da79eb1b63 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Sun, 8 Mar 2026 18:45:07 -0700
Subject: [PATCH] Patch a bizarre browser quirk of leaky elements (???) in the
 packet list

---
 frontend/src/App.tsx                      | 6 +++---
 frontend/src/components/RawPacketList.tsx | 7 +++++--
 frontend/src/components/Sidebar.tsx       | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b6e3df0..e9931ca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -614,7 +614,7 @@ export function App() {
 
   const settingsSidebarContent = (
     <nav
-      className="sidebar w-60 h-full min-h-0 bg-card border-r border-border flex flex-col"
+      className="sidebar w-60 h-full min-h-0 overflow-hidden bg-card border-r border-border flex flex-col"
       aria-label="Settings"
     >
       <div className="flex justify-between items-center px-3 py-2.5 border-b border-border">
@@ -631,7 +631,7 @@ export function App() {
           &larr; Back to Chat
         </button>
       </div>
-      <div className="flex-1 overflow-y-auto py-1">
+      <div className="flex-1 min-h-0 overflow-y-auto py-1 [contain:layout_paint]">
         {SETTINGS_SECTION_ORDER.map((section) => (
           <button
             key={section}
@@ -681,7 +681,7 @@ export function App() {
 
       <div className="flex flex-1 overflow-hidden">
         {/* Desktop sidebar - hidden on mobile */}
-        <div className="hidden md:block">{activeSidebarContent}</div>
+        <div className="hidden md:block min-h-0 overflow-hidden">{activeSidebarContent}</div>
 
         {/* Mobile sidebar - Sheet that slides in */}
         <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
diff --git a/frontend/src/components/RawPacketList.tsx b/frontend/src/components/RawPacketList.tsx
index 823ff1a..6e206a8 100644
--- a/frontend/src/components/RawPacketList.tsx
+++ b/frontend/src/components/RawPacketList.tsx
@@ -202,14 +202,17 @@ export function RawPacketList({ packets }: RawPacketListProps) {
 
   if (packets.length === 0) {
     return (
-      <div className="h-full overflow-y-auto p-5 text-center text-muted-foreground">
+      <div className="h-full overflow-y-auto p-5 text-center text-muted-foreground [contain:layout_paint]">
         No packets received yet. Packets will appear here in real-time.
       </div>
     );
   }
 
   return (
-    <div className="h-full overflow-y-auto p-4 flex flex-col gap-2" ref={listRef}>
+    <div
+      className="h-full overflow-y-auto p-4 flex flex-col gap-2 [contain:layout_paint]"
+      ref={listRef}
+    >
       {sortedPackets.map(({ packet, decoded }) => (
         <div
           key={getRawPacketObservationKey(packet)}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 6702589..f44d8ae 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -625,7 +625,7 @@ export function Sidebar({
 
   return (
     <nav
-      className="sidebar w-60 h-full min-h-0 bg-card border-r border-border flex flex-col"
+      className="sidebar w-60 h-full min-h-0 overflow-hidden bg-card border-r border-border flex flex-col"
       aria-label="Conversations"
     >
       {/* Header */}
@@ -668,7 +668,7 @@ export function Sidebar({
       </div>
 
       {/* List */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 min-h-0 overflow-y-auto [contain:layout_paint]">
         {/* Tools */}
         {toolRows.length > 0 && (
           <>