From 0f735bea37c72720e3ba798c6870ef0fb2886a16 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 12 Mar 2026 08:57:57 -0500
Subject: [PATCH] use icon only on mobile

---
 .../config-form/sections/BaseSection.tsx      |  2 +-
 .../settings/ProfileSectionDropdown.tsx       | 42 ++++++++++++-------
 web/src/pages/Settings.tsx                    |  1 +
 web/src/views/settings/ProfilesView.tsx       |  2 +-
 web/src/views/settings/SingleSectionPage.tsx  |  2 +-
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/web/src/components/config-form/sections/BaseSection.tsx b/web/src/components/config-form/sections/BaseSection.tsx
index f8a22b43c..9918836bd 100644
--- a/web/src/components/config-form/sections/BaseSection.tsx
+++ b/web/src/components/config-form/sections/BaseSection.tsx
@@ -1157,7 +1157,7 @@ export function ConfigSection({
                         <Badge
                           variant="secondary"
                           className={cn(
-                            "cursor-default border-2 text-xs text-primary-variant",
+                            "cursor-default border-2 text-center text-xs text-primary-variant",
                             overrideSource === "profile" && profileBorderColor
                               ? profileBorderColor
                               : "border-selected",
diff --git a/web/src/components/settings/ProfileSectionDropdown.tsx b/web/src/components/settings/ProfileSectionDropdown.tsx
index 895ce4992..cab681f46 100644
--- a/web/src/components/settings/ProfileSectionDropdown.tsx
+++ b/web/src/components/settings/ProfileSectionDropdown.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Check, ChevronDown } from "lucide-react";
+import { LuLayers } from "react-icons/lu";
 import { cn } from "@/lib/utils";
 import { getProfileColor } from "@/utils/profileColors";
 import {
@@ -17,6 +18,8 @@ type ProfileSectionDropdownProps = {
   editingProfile: string | null;
   hasProfileData: (profileName: string) => boolean;
   onSelectProfile: (profileName: string | null) => void;
+  /** When true, show only an icon as the trigger (for mobile) */
+  iconOnly?: boolean;
 };
 
 export function ProfileSectionDropdown({
@@ -25,6 +28,7 @@ export function ProfileSectionDropdown({
   editingProfile,
   hasProfileData,
   onSelectProfile,
+  iconOnly = false,
 }: ProfileSectionDropdownProps) {
   const { t } = useTranslation(["views/settings"]);
 
@@ -39,22 +43,28 @@ export function ProfileSectionDropdown({
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="h-9 gap-2 font-normal">
-          {editingProfile ? (
-            <>
-              <span
-                className={cn(
-                  "h-2 w-2 shrink-0 rounded-full",
-                  activeColor?.dot,
-                )}
-              />
-              {editingFriendlyName}
-            </>
-          ) : (
-            t("profiles.baseConfig", { ns: "views/settings" })
-          )}
-          <ChevronDown className="h-3 w-3 opacity-50" />
-        </Button>
+        {iconOnly ? (
+          <Button variant="outline" size="sm">
+            <LuLayers className="size-4" />
+          </Button>
+        ) : (
+          <Button variant="outline" className="h-9 gap-2 font-normal">
+            {editingProfile ? (
+              <>
+                <span
+                  className={cn(
+                    "h-2 w-2 shrink-0 rounded-full",
+                    activeColor?.dot,
+                  )}
+                />
+                {editingFriendlyName}
+              </>
+            ) : (
+              t("profiles.baseConfig", { ns: "views/settings" })
+            )}
+            <ChevronDown className="h-3 w-3 opacity-50" />
+          </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="min-w-[180px]">
         <DropdownMenuItem onClick={() => onSelectProfile(null)}>
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 789a5ce0c..33941cf9d 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1648,6 +1648,7 @@ export default function Settings() {
                               profile,
                             )
                           }
+                          iconOnly
                         />
                       )}
                       <CameraSelectButton
diff --git a/web/src/views/settings/ProfilesView.tsx b/web/src/views/settings/ProfilesView.tsx
index 69a9e5d71..2f9eb2694 100644
--- a/web/src/views/settings/ProfilesView.tsx
+++ b/web/src/views/settings/ProfilesView.tsx
@@ -409,7 +409,7 @@ export default function ProfilesView({
                   })}
                 </SelectContent>
               </Select>
-              {activating && <ActivityIndicator className="w-auto" size={18} />}
+              {activating && <ActivityIndicator className="size-4" />}
             </div>
           )}
           <Button
diff --git a/web/src/views/settings/SingleSectionPage.tsx b/web/src/views/settings/SingleSectionPage.tsx
index 535a5dee6..ee87a9e76 100644
--- a/web/src/views/settings/SingleSectionPage.tsx
+++ b/web/src/views/settings/SingleSectionPage.tsx
@@ -167,7 +167,7 @@ export function SingleSectionPage({
                     <Badge
                       variant="secondary"
                       className={cn(
-                        "cursor-default border-2 text-xs text-primary-variant",
+                        "cursor-default border-2 text-center text-xs text-primary-variant",
                         sectionStatus.overrideSource === "profile" &&
                           profileColor
                           ? profileColor.border