use icon only on mobile

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",

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">
+        {iconOnly ? (
-          {editingProfile ? (
+          <Button variant="outline" size="sm">
-            <>
+            <LuLayers className="size-4" />
-              <span
+          </Button>
-                className={cn(
+        ) : (
-                  "h-2 w-2 shrink-0 rounded-full",
+          <Button variant="outline" className="h-9 gap-2 font-normal">
-                  activeColor?.dot,
+            {editingProfile ? (
-                )}
+              <>
-              />
+                <span
-              {editingFriendlyName}
+                  className={cn(
-            </>
+                    "h-2 w-2 shrink-0 rounded-full",
-          ) : (
+                    activeColor?.dot,
-            t("profiles.baseConfig", { ns: "views/settings" })
+                  )}
-          )}
+                />
-          <ChevronDown className="h-3 w-3 opacity-50" />
+                {editingFriendlyName}
-        </Button>
+              </>
+            ) : (
+              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)}>

web/src/pages/Settings.tsx

@@ -1648,6 +1648,7 @@ export default function Settings() {
                               profile,
                             )
                           }
+                          iconOnly
                         />
                       )}
                       <CameraSelectButton

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

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