From c1b41e421f64281166b39e0e0c98c119d0f4e268 Mon Sep 17 00:00:00 2001
From: Reece <reece@stirlingpdf.com>
Date: Wed, 15 Jul 2026 13:16:48 +0100
Subject: [PATCH] fix(ui): convert super-search rows and the toolbar reopen tab
 to shared Button

Raw <button> elements predating the shared-Button lint rule; the rule
now fails the branch since the SUI consolidation landed on main.
---
 .../editor/src/core/components/layout/Workbench.tsx   | 11 +++++++----
 .../components/shared/superSearch/SuperSearch.tsx     |  8 ++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/editor/src/core/components/layout/Workbench.tsx b/frontend/editor/src/core/components/layout/Workbench.tsx
index aabf54251a..0c1055acb6 100644
--- a/frontend/editor/src/core/components/layout/Workbench.tsx
+++ b/frontend/editor/src/core/components/layout/Workbench.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState, Suspense, lazy } from "react";
 import { useTranslation } from "react-i18next";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { Box, Loader, Center } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import { useFileHandler } from "@app/hooks/useFileHandler";
 import { useFileState } from "@app/contexts/FileContext";
@@ -248,16 +249,18 @@ export default function Workbench() {
             {/* Reopen tab: a little handle hanging off the bar's bottom-right
                 while the viewer tool row is retracted. */}
             {showReopenTab && (
-              <button
+              <Button
                 type="button"
+                variant="quiet"
                 className={styles.workbenchBarReopenTab}
                 onClick={() => setViewerToolbarCollapsed(false)}
                 aria-expanded={false}
                 aria-label={t("workbenchBar.showToolbar", "Show toolbar")}
                 title={t("workbenchBar.showToolbar", "Show toolbar")}
-              >
-                <KeyboardArrowDownIcon sx={{ fontSize: "1rem" }} />
-              </button>
+                leftSection={
+                  <KeyboardArrowDownIcon sx={{ fontSize: "1rem" }} />
+                }
+              />
             )}
           </div>
         )}
diff --git a/frontend/editor/src/core/components/shared/superSearch/SuperSearch.tsx b/frontend/editor/src/core/components/shared/superSearch/SuperSearch.tsx
index b704f31a04..2ec91bf825 100644
--- a/frontend/editor/src/core/components/shared/superSearch/SuperSearch.tsx
+++ b/frontend/editor/src/core/components/shared/superSearch/SuperSearch.tsx
@@ -9,6 +9,7 @@ import {
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { TextInput } from "@app/components/shared/TextInput";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { isMacLike } from "@app/utils/hotkeys";
@@ -186,9 +187,12 @@ export default function SuperSearch() {
                 const index = flatResults.indexOf(result);
                 const active = index === highlight;
                 return (
-                  <button
+                  <Button
                     key={result.key}
                     type="button"
+                    variant="quiet"
+                    justify="start"
+                    fullWidth
                     role="option"
                     aria-selected={active}
                     className={`super-search-item${active ? " active" : ""}`}
@@ -214,7 +218,7 @@ export default function SuperSearch() {
                         </Text>
                       )}
                     </span>
-                  </button>
+                  </Button>
                 );
               })}
             </div>