From 8eb1f6e74869130b7602e0c6b0ab56b7805c0889 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 17 Sep 2026 20:19:46 -0700
Subject: [PATCH] refactor(web): reuse inline settings actions (#12362)

---
 .../src/components/settings/ExpandableText.tsx |  8 ++++----
 .../components/settings/SettingInheritance.tsx | 18 ++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/settings/ExpandableText.tsx b/apps/web/src/components/settings/ExpandableText.tsx
index fa5fb94aadd1045b02ec290b25cfdcfc5406e682..36c0ce7c952947009cbc255145bca050164d5f9b 100644
--- a/apps/web/src/components/settings/ExpandableText.tsx
+++ b/apps/web/src/components/settings/ExpandableText.tsx
@@ -1,3 +1,4 @@
+import { InlineButton } from "../ui/button";
 import { useId, useState } from "react";
 
 import { cn } from "../../lib/utils";
@@ -33,15 +34,14 @@ export function ExpandableText({
         {text}
       </div>
       {canExpand ? (
-        <button
-          type="button"
+        <InlineButton
           aria-expanded={expanded}
           aria-controls={textId}
-          className="cursor-pointer mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
+          className="mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
           onClick={() => setExpanded((value) => !value)}
         >
           {expanded ? "Show less" : expandLabel}
-        </button>
+        </InlineButton>
       ) : null}
     </div>
   );
diff --git a/apps/web/src/components/settings/SettingInheritance.tsx b/apps/web/src/components/settings/SettingInheritance.tsx
index 4bec97f9132ec7f318d8e1d2afaef21a69a87298..7e0ed7edfca44b82537597ff633676a1418c4bfe 100644
--- a/apps/web/src/components/settings/SettingInheritance.tsx
+++ b/apps/web/src/components/settings/SettingInheritance.tsx
@@ -11,7 +11,7 @@ import type { EnvironmentPresentation } from "../../state/environments";
 import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
 import { resolveEnvModeLabel } from "../BranchToolbar.logic";
 import { PULL_REQUEST_MERGE_METHOD_LABELS } from "../pullRequest/pullRequestDetail.logic";
-import { Button } from "../ui/button";
+import { Button, InlineButton } from "../ui/button";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import type { ProjectOverrideEntry, ScopedSettingsTarget } from "./scopedSettings";
@@ -261,13 +261,12 @@ export function SettingInheritance({
                     <div className="flex items-center justify-between gap-3 px-2 text-xs text-muted-foreground">
                       <span>Overridden by</span>
                       {onClearOverrides ? (
-                        <button
-                          type="button"
-                          className="cursor-pointer font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+                        <InlineButton
+                          className="font-medium text-foreground underline-offset-2 hover:underline"
                           onClick={() => onClearOverrides(overriding)}
                         >
                           Reset {overriding.length === 1 ? "it" : "all"}
-                        </button>
+                        </InlineButton>
                       ) : null}
                     </div>
                     <ul role="list" className="mt-0.5 text-sm">
@@ -276,13 +275,12 @@ export function SettingInheritance({
                           key={project.projectId}
                           className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 px-2 py-1"
                         >
-                          <button
-                            type="button"
-                            className="min-w-0 cursor-pointer truncate text-left text-foreground underline-offset-2 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+                          <InlineButton
+                            className="min-w-0 justify-start text-left text-foreground underline-offset-2 hover:underline"
                             onClick={project.open}
                           >
-                            {project.label}
-                          </button>
+                            <span className="truncate">{project.label}</span>
+                          </InlineButton>
                           <span className="max-w-32 truncate text-muted-foreground tabular-nums">
                             {isProjectScopedSettingKey(key)
                               ? formatValue(key, overrides[project.projectId]?.[key])
-- 
2.54.0