diff --git a/frontend/editor/src/core/components/shared/TextInput.test.tsx b/frontend/editor/src/core/components/shared/TextInput.test.tsx
new file mode 100644
index 0000000000..d0dd2c9564
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/TextInput.test.tsx
@@ -0,0 +1,79 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { TextInput } from "@app/components/shared/TextInput";
+import { MantineProvider } from "@mantine/core";
+
+function renderWithMantine(ui: React.ReactElement) {
+  return render(<MantineProvider>{ui}</MantineProvider>);
+}
+
+describe("TextInput", () => {
+  it("renders input with value and placeholder", () => {
+    renderWithMantine(
+      <TextInput
+        id="test-input"
+        name="test-input"
+        value="hello"
+        onChange={vi.fn()}
+        placeholder="Type here..."
+      />,
+    );
+
+    const input = screen.getByPlaceholderText("Type here...");
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue("hello");
+  });
+
+  it("shows clear button when there is a value and triggers clear on click", () => {
+    const onChange = vi.fn();
+    renderWithMantine(
+      <TextInput
+        id="test-input"
+        name="test-input"
+        value="search text"
+        onChange={onChange}
+        showClearButton={true}
+      />,
+    );
+
+    const clearButton = screen.getByRole("button", {
+      name: /(?:clear|textInput\.clear)/i,
+    });
+    expect(clearButton).toBeInTheDocument();
+
+    fireEvent.click(clearButton);
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("does not show clear button when value is empty", () => {
+    renderWithMantine(
+      <TextInput
+        id="test-input"
+        name="test-input"
+        value=""
+        onChange={vi.fn()}
+        showClearButton={true}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("button", { name: /clear input/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not show clear button when showClearButton is false", () => {
+    renderWithMantine(
+      <TextInput
+        id="test-input"
+        name="test-input"
+        value="some text"
+        onChange={vi.fn()}
+        showClearButton={false}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("button", { name: /clear input/i }),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/editor/src/core/components/shared/TextInput.tsx b/frontend/editor/src/core/components/shared/TextInput.tsx
index 7d927bb011..41a4223a4c 100644
--- a/frontend/editor/src/core/components/shared/TextInput.tsx
+++ b/frontend/editor/src/core/components/shared/TextInput.tsx
@@ -119,12 +119,25 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         />
         {shouldShowClearButton && (
           <ActionIcon
-            variant="tertiary"
+            variant="quiet"
+            accent="neutral"
+            shape="circle"
             className={styles.clearButton}
+            style={
+              {
+                "--ai-size": "1.25rem",
+                width: "1.25rem",
+                height: "1.25rem",
+              } as React.CSSProperties
+            }
             onClick={handleClear}
             aria-label={t("textInput.clear", "Clear input")}
           >
-            <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
+            <LocalIcon
+              icon="close-rounded"
+              width="0.875rem"
+              height="0.875rem"
+            />
           </ActionIcon>
         )}
       </div>
diff --git a/frontend/editor/src/core/components/shared/superSearch/SuperSearch.css b/frontend/editor/src/core/components/shared/superSearch/SuperSearch.css
index 6920c37be4..a815d88fca 100644
--- a/frontend/editor/src/core/components/shared/superSearch/SuperSearch.css
+++ b/frontend/editor/src/core/components/shared/superSearch/SuperSearch.css
@@ -209,9 +209,6 @@
 }
 
 .super-search-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
   width: 100%;
   padding: 0.45rem 0.5rem;
   border: none;
@@ -227,6 +224,18 @@
   background: var(--c-hover);
 }
 
+.super-search-item .mantine-Button-inner {
+  width: 100%;
+}
+
+.super-search-item .mantine-Button-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  overflow: visible;
+}
+
 .super-search-item-icon {
   display: flex;
   align-items: center;
@@ -241,6 +250,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  flex: 1 1 auto;
 }
 
 .super-search-item-title {
diff --git a/frontend/editor/src/core/components/shared/textInput/TextInput.module.css b/frontend/editor/src/core/components/shared/textInput/TextInput.module.css
index b5131b014f..0b6a38c7af 100644
--- a/frontend/editor/src/core/components/shared/textInput/TextInput.module.css
+++ b/frontend/editor/src/core/components/shared/textInput/TextInput.module.css
@@ -52,22 +52,29 @@
 
 .clearButton {
   position: absolute;
-  right: 8px;
+  right: 6px;
   top: 50%;
   transform: translateY(-50%);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  display: flex;
+  --ai-size: 1.35rem !important;
+  width: 1.35rem !important;
+  height: 1.35rem !important;
+  min-width: 1.35rem !important;
+  min-height: 1.35rem !important;
+  padding: 0 !important;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
-  transition: background-color 0.2s ease;
+  border-radius: var(--radius-full, 9999px);
+  background: transparent;
+  border: none;
+  cursor: pointer;
   color: var(--c-text-subtle);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .clearButton:hover {
-  background-color: var(--c-hover);
+  color: var(--c-text);
+  background-color: var(--c-hover) !important;
 }