From 3fb5ef70835a209041fd10b20525b5a7e619cbbd Mon Sep 17 00:00:00 2001
From: Brandon Pereira <brandon-pereira@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:59:55 -0500
Subject: [PATCH] fix prop warnings (#1366)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Very minor PR which fixes 2 HTML structure issues (div under p, button under button).

Before:
<img width="968" height="146" alt="Screenshot 2025-11-13 at 6 58 22 PM" src="https://github.com/user-attachments/assets/ca16ea04-d308-47ec-a3f0-74a8c639dd4b" />

After:
Non prop errors (on search page at least)
---
 .changeset/chatty-parents-drum.md                            | 5 +++++
 packages/app/src/components/DBTable/DBRowTableIconButton.tsx | 2 ++
 packages/app/src/components/SQLInlineEditor.tsx              | 1 +
 packages/app/tests/e2e/features/shared/multiline.spec.ts     | 4 ++--
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chatty-parents-drum.md

diff --git a/.changeset/chatty-parents-drum.md b/.changeset/chatty-parents-drum.md
new file mode 100644
index 00000000..6ac814ae
--- /dev/null
+++ b/.changeset/chatty-parents-drum.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Small fix for html structure nesting issues
diff --git a/packages/app/src/components/DBTable/DBRowTableIconButton.tsx b/packages/app/src/components/DBTable/DBRowTableIconButton.tsx
index c409c477..409cb176 100644
--- a/packages/app/src/components/DBTable/DBRowTableIconButton.tsx
+++ b/packages/app/src/components/DBTable/DBRowTableIconButton.tsx
@@ -51,8 +51,10 @@ export const DBRowTableIconButton: React.FC<DBRowTableIconButtonProps> = ({
     >
       <UnstyledButton
         onClick={handleClick}
+        component="div"
         className={baseClasses}
         tabIndex={tabIndex}
+        role="button"
       >
         {isActive ? <IconCheck size={iconSize} /> : children}
       </UnstyledButton>
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
index f7fa5684..686f53a9 100644
--- a/packages/app/src/components/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLInlineEditor.tsx
@@ -327,6 +327,7 @@ export default function SQLInlineEditor({
           style={{
             whiteSpace: 'nowrap',
           }}
+          component="div"
         >
           <Tooltip label={tooltipText} disabled={!tooltipText}>
             <Flex align="center" gap={2}>
diff --git a/packages/app/tests/e2e/features/shared/multiline.spec.ts b/packages/app/tests/e2e/features/shared/multiline.spec.ts
index 0d8daa3c..e4fa4cbc 100644
--- a/packages/app/tests/e2e/features/shared/multiline.spec.ts
+++ b/packages/app/tests/e2e/features/shared/multiline.spec.ts
@@ -110,7 +110,7 @@ test.describe('Multiline Input', { tag: '@search' }, () => {
       if (config.mode === 'SQL') {
         const scopedContainer = formSelector ? container : page;
         const whereLabel = scopedContainer.locator(
-          `p.mantine-Text-root:has-text("${whereText}")`,
+          `div.mantine-Text-root:has-text("${whereText}")`,
         );
         await expect(whereLabel).toBeVisible();
       }
@@ -122,7 +122,7 @@ test.describe('Multiline Input', { tag: '@search' }, () => {
         ? (() => {
             const scopedContainer = formSelector ? container : page;
             const whereContainer = scopedContainer.locator(
-              `div:has(p.mantine-Text-root:has-text("${whereText}"))`,
+              `div:has(div.mantine-Text-root:has-text("${whereText}"))`,
             );
             return whereContainer.locator('.cm-editor').first();
           })()