Patch a bizarre browser quirk of leaky elements (???) in the packet list

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

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

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 && (
           <>