hyperdxio · elizabetdev · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
@@ -166,7 +166,6 @@ function AIAssistant({
       </Group>
       <Collapse in={opened}>
         {opened && (
-          // eslint-disable-next-line react-hooks/refs
           <form onSubmit={handleSubmit(onSubmit)}>
             <Group mb="md">
               <SourceSelectControlled

diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
@@ -264,7 +264,6 @@ export default function DOMPlayer({
       );
     }
 
-    // eslint-disable-next-line react-hooks/immutability
     updatePlayerTimeRafRef.current = requestAnimationFrame(updatePlayerTime);
   }, []);
 

diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
@@ -4,7 +4,16 @@ import Link from 'next/link';
 import cx from 'classnames';
 import { format } from 'date-fns';
 import { JSONTree } from 'react-json-tree';
-import { Alert, Button, CloseButton, Kbd, Text, Tooltip } from '@mantine/core';
+import {
+  Alert,
+  Button,
+  Group,
+  Kbd,
+  Modal,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import {
   IconChevronDown,
   IconChevronRight,
@@ -486,37 +495,50 @@ export const NetworkBody = ({
 /**
  * Keyboard shortcuts
  */
-export const LogSidePanelKbdShortcuts = () => {
-  const [isDismissed, setDismissed] = useLocalStorage<boolean>(
-    'kbd-shortcuts-dismissed',
-    false,
-  );
-
-  const handleDismiss = React.useCallback(() => {
-    setDismissed(true);
-  }, [setDismissed]);
-
-  if (isDismissed) {
-    return null;
-  }
 
+const SHORTCUTS = [
+  { keys: ['esc'], label: 'Close panel' },
+  { keys: ['←', '→'], label: 'Navigate between events' },
+  { keys: ['↑', '↓'], label: 'Navigate between events' },
+  { keys: ['k', 'j'], label: 'Navigate between events' },
+  { keys: ['⌘/Ctrl', 'scroll'], label: 'Zoom trace timeline' },
+] as const;
+
+export const KeyboardShortcutsModal = ({
+  opened,
+  onClose,
+}: {
+  opened: boolean;
+  onClose: () => void;
+}) => {
   return (
-    <div className={styles.kbdShortcuts}>
-      <div className="d-flex justify-content-between align-items-center ">
-        <div className="d-flex align-items-center gap-3">
-          <div>
-            Use <Kbd className="me-1">←</Kbd>
-            <Kbd>→</Kbd> arrow keys or <Kbd className="me-1">k</Kbd>
-            <Kbd>j</Kbd> to move through events
-          </div>
-          <div className={styles.kbdDivider} />
-          <div>
-            <Kbd>ESC</Kbd> to close
-          </div>
-        </div>
-        <CloseButton aria-label="Hide" onClick={handleDismiss} />
-      </div>
-    </div>
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Keyboard Shortcuts"
+      size="sm"
+      centered
+    >
+      <Stack gap="sm">
+        {SHORTCUTS.map(({ keys, label }) => (
+          <Group key={label} justify="space-between">
+            <Group gap={4}>
+              {keys.map((key, i) => (
+                <React.Fragment key={key}>
+                  {i > 0 && (
+                    <Text span size="xs" c="dimmed">
+                      +
+                    </Text>
+                  )}
+                  <Kbd size="xs">{key}</Kbd>
+                </React.Fragment>
+              ))}
+            </Group>
+            <Text size="sm">{label}</Text>
+          </Group>
+        ))}
+      </Stack>
+    </Modal>
   );
 };
 

diff --git a/packages/app/src/NamespaceDetailsSidePanel.tsx b/packages/app/src/NamespaceDetailsSidePanel.tsx
@@ -181,8 +181,6 @@ function NamespaceLogs({
       <Card.Section p="md" py="sm" h={CHART_HEIGHT}>
         <DBSqlRowTableWithSideBar
           sourceId={logSource.id}
-          isNestedPanel
-          breadcrumbPath={[{ label: 'Namespace Details' }]}
           config={{
             ...logSource,
             where: _where,

diff --git a/packages/app/src/NodeDetailsSidePanel.tsx b/packages/app/src/NodeDetailsSidePanel.tsx
@@ -194,8 +194,6 @@ function NodeLogs({
       <Card.Section p="md" py="sm" h={CHART_HEIGHT}>
         <DBSqlRowTableWithSideBar
           sourceId={logSource.id}
-          isNestedPanel
-          breadcrumbPath={[{ label: 'Node Details' }]}
           config={{
             ...logSource,
             where: _where,

diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
@@ -207,8 +207,6 @@ function PodLogs({
           sourceId={logSource.id}
           config={tableConfig}
           isLive={false}
-          isNestedPanel
-          breadcrumbPath={[{ label: 'Pods' }]}
           queryKeyPrefix="k8s-dashboard-pod-logs"
         />
       </Card.Section>
@@ -471,7 +469,6 @@ export default function PodDetailsSidePanel({
               rowId={rowId}
               aliasWith={aliasWith}
               onClose={handleCloseRowSidePanel}
-              isNestedPanel={true}
             />
           )}
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -264,7 +264,6 @@ export default function DOMPlayer({ @@
           );
         }
-        // eslint-disable-next-line react-hooks/immutability
         updatePlayerTimeRafRef.current = requestAnimationFrame(updatePlayerTime);
       }, []);
@@ Expand Down @@