From 454a7845bbd82acd039b6b60bd473615b3f59101 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Tue, 16 Jun 2026 12:24:04 +0000
Subject: [PATCH] feat(web/ui): replace inline font-size violations and use new
 primitives in components

---
 .../ConfigProfileEditorPanel.tsx                |  2 +-
 .../ConfigProfileListSidebar.tsx                | 17 +++--------------
 .../components/features/tool/instance-list.tsx  | 16 ++--------------
 3 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx b/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
index 16fd544..974d99a 100644
--- a/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
+++ b/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
@@ -197,7 +197,7 @@ export const ConfigProfileEditorPanel = ({
                       >
                         <span style={{ cursor: "grab", color: "var(--muted)" }}><Icon name="drag" size="sm" /></span>
                         <span style={{ flex: 1, fontWeight: 500 }}>{profile.name}</span>
-                        <span style={{ fontSize: "0.75rem", padding: "0.125rem 0.375rem", background: "var(--badge-bg, #f3f4f6)", color: "var(--muted)", borderRadius: "0.25rem", textTransform: "uppercase", letterSpacing: "0.025em" }}>{getScopeLabel(profile)}</span>
+                        <span className="badge">{getScopeLabel(profile)}</span>
                         <button type="button" onClick={() => onRemoveInclude(index)} style={{ background: "none", border: "none", color: "var(--danger)", cursor: "pointer", padding: "0.25rem", borderRadius: "0.25rem" }} title="Remove include"><Icon name="delete" size="sm" /></button>
                       </div>
                     );
diff --git a/apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx b/apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx
index 6cf5a88..a5fc17c 100644
--- a/apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx
+++ b/apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx
@@ -77,30 +77,19 @@ export const ConfigProfileListSidebar = ({
               >
                 {profile.name}
                 {profile.is_default && (
-                  <span
-                    style={{
-                      fontSize: "0.7rem",
-                      marginLeft: "0.5rem",
-                      opacity: 0.8,
-                      textTransform: "uppercase",
-                      letterSpacing: "0.025em",
-                    }}
-                  >
+                  <span className="badge badge-secondary" style={{ marginLeft: "0.5rem" }}>
                     default
                   </span>
                 )}
                 {profile.includes?.length > 0 && (
                   <span
+                    className="badge"
                     style={{
-                      fontSize: "0.7rem",
                       marginLeft: "0.5rem",
-                      opacity: 0.7,
                       background:
                         selectedProfileId === profile.id
                           ? "rgba(255,255,255,0.2)"
-                          : "var(--badge-bg, #f3f4f6)",
-                      padding: "0.0625rem 0.375rem",
-                      borderRadius: "0.25rem",
+                          : undefined,
                     }}
                   >
                     {profile.includes.length} include{profile.includes.length !== 1 ? "s" : ""}
diff --git a/apps/web/src/components/features/tool/instance-list.tsx b/apps/web/src/components/features/tool/instance-list.tsx
index de5b878..fc727b4 100644
--- a/apps/web/src/components/features/tool/instance-list.tsx
+++ b/apps/web/src/components/features/tool/instance-list.tsx
@@ -342,13 +342,7 @@ export const InstanceList = ({
 													{sshKeys.map((key) => (
 														<label
 															key={key.id}
-															className="checkbox-label"
-															style={{
-																fontSize: "0.75rem",
-																display: "flex",
-																alignItems: "center",
-																gap: "0.25rem",
-															}}
+															className="checkbox-label checkbox-label-compact"
 														>
 															<input
 																type="checkbox"
@@ -487,13 +481,7 @@ export const InstanceList = ({
 													{sshKeys.map((key) => (
 														<label
 															key={key.id}
-															className="checkbox-label"
-															style={{
-																fontSize: "0.75rem",
-																display: "flex",
-																alignItems: "center",
-																gap: "0.25rem",
-															}}
+															className="checkbox-label checkbox-label-compact"
 														>
 															<input
 																type="checkbox"