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

This commit is contained in:
Jack Kingsman
2026-03-08 18:45:07 -07:00
parent 77523c1b15
commit b14e99ff24
3 changed files with 10 additions and 7 deletions

View File

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

View File

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

View File

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