From 7df21d03f2de8c8edaf253c7d1a75c9956b9047d Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Mon, 16 Feb 2026 17:33:20 -0800
Subject: [PATCH] Change visualizer layout

---
 frontend/src/components/PacketVisualizer3D.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/PacketVisualizer3D.tsx b/frontend/src/components/PacketVisualizer3D.tsx
index 6053234..690406c 100644
--- a/frontend/src/components/PacketVisualizer3D.tsx
+++ b/frontend/src/components/PacketVisualizer3D.tsx
@@ -1500,7 +1500,7 @@ export function PacketVisualizer3D({
       )}
 
       {/* Options */}
-      <div className="absolute top-4 right-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10">
+      <div className="absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10">
         <div className="flex flex-col gap-2">
           {!hideUI && (
             <>
@@ -1662,8 +1662,8 @@ export function PacketVisualizer3D({
       </div>
 
       {/* Hovered/pinned node tooltip */}
-      {(pinnedNodeId ?? hoveredNodeId) && !hideUI && (
-        <div className="absolute bottom-4 right-4 bg-background/90 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10 max-w-72">
+      {(pinnedNodeId ?? hoveredNodeId) && (
+        <div className="absolute top-4 right-4 bg-background/90 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10 max-w-72">
           {(() => {
             const tooltipNodeId = pinnedNodeId ?? hoveredNodeId;
             const node = tooltipNodeId ? data.nodes.get(tooltipNodeId) : null;