style: update font sizes and dimensions for improved UI consistency across components

src/features/providers/components/OpenAIBrandToolbar.module.scss

@@ -15,7 +15,7 @@
 }
 
 .label {
-  font-size: 11px;
+  font-size: 12px;
   color: var(--muted-foreground);
   white-space: nowrap;
 }
@@ -24,8 +24,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--bg-primary);
@@ -47,13 +47,13 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 28px;
-  padding: 0 10px;
+  height: 30px;
+  padding: 0 11px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--bg-primary);
   color: var(--text-primary);
-  font-size: 12px;
+  font-size: 13px;
   cursor: pointer;
   transition: background-color $transition-fast, border-color $transition-fast;
 
@@ -93,12 +93,12 @@
 }
 
 .filterToolbarBtn {
-  padding: 2px 8px;
+  padding: 3px 9px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--bg-primary);
   color: var(--text-secondary);
-  font-size: 11px;
+  font-size: 12px;
   cursor: pointer;
 
   &:hover:not(:disabled) {
@@ -115,7 +115,7 @@
 .filterEmpty {
   padding: 12px;
   text-align: center;
-  font-size: 12px;
+  font-size: 13px;
   color: var(--muted-foreground);
 }
 
@@ -141,6 +141,6 @@
 
 .filterItemLabel {
   font-family: $font-mono;
-  font-size: 12px;
+  font-size: 13px;
   word-break: break-all;
 }

src/features/providers/components/ProviderCategoryList.module.scss

@@ -12,7 +12,7 @@
 
 .eyebrow {
   margin: 4px 8px 8px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -68,8 +68,8 @@
 }
 
 .logo {
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   border-radius: var(--radius-md);
   flex-shrink: 0;
   object-fit: contain;
@@ -90,7 +90,7 @@
 }
 
 .itemTitle {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -98,7 +98,7 @@
 }
 
 .itemSubtitle {
-  font-size: 11px;
+  font-size: 12px;
   color: var(--muted-foreground);
   margin-top: 2px;
   font-weight: 400;
@@ -113,10 +113,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 24px;
-  padding: 2px 8px;
+  min-width: 26px;
+  padding: 2px 9px;
   border-radius: var(--radius-md);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);

src/features/providers/components/ProviderHeaderCard.module.scss

@@ -28,14 +28,14 @@
 
 .title {
   margin: 0;
-  font-size: 28px;
+  font-size: 30px;
   font-weight: 700;
   color: var(--text-primary);
 }
 
 .subtitle {
   margin: 0;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--muted-foreground);
   line-height: 1.5;
 }
@@ -55,10 +55,10 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
-  padding: 0 12px;
+  height: 34px;
+  padding: 0 14px;
   border-radius: var(--radius-md);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: background-color $transition-fast, border-color $transition-fast,
@@ -111,12 +111,12 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 10px;
+  padding: 5px 12px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--muted-bg);
   color: var(--muted-foreground);
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
 }
 

src/features/providers/components/ProviderHeaderCard.tsx

@@ -52,7 +52,7 @@ export function ProviderHeaderCard({
             }
           >
             <span className={`${styles.btnIcon} ${isFetching ? styles.spin : ''}`.trim()}>
-              {isFetching ? <IconLoader2 size={14} /> : <IconRefreshCw size={14} />}
+              {isFetching ? <IconLoader2 size={16} /> : <IconRefreshCw size={16} />}
             </span>
             <span>
               {isFetching
@@ -66,7 +66,7 @@ export function ProviderHeaderCard({
             onClick={onNew}
             disabled={isNewDisabled}
           >
-            <IconPlus size={14} />
+            <IconPlus size={16} />
             <span>{newLabel ?? t('providersPage.actions.new')}</span>
           </button>
         </div>

src/features/providers/components/ProviderResourcePanel.module.scss

@@ -52,8 +52,8 @@
 }
 
 .logo {
-  width: 24px;
-  height: 24px;
+  width: 26px;
+  height: 26px;
   border-radius: var(--radius-md);
   object-fit: contain;
   flex-shrink: 0;
@@ -66,7 +66,7 @@
 }
 
 .title {
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 600;
   color: var(--text-primary);
   margin: 0;
@@ -84,13 +84,13 @@
 
 .searchInput {
   width: 100%;
-  height: 36px;
-  padding: 0 12px 0 36px;
+  height: 38px;
+  padding: 0 12px 0 38px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--bg-primary);
   color: var(--text-primary);
-  font-size: 13px;
+  font-size: 14px;
   box-sizing: border-box;
 
   &::placeholder {
@@ -107,7 +107,7 @@
 .searchIcon {
   position: absolute;
   top: 50%;
-  left: 12px;
+  left: 13px;
   transform: translateY(-50%);
   color: var(--muted-foreground);
   pointer-events: none;
@@ -119,7 +119,7 @@
   background: var(--amber-10);
   border-radius: var(--radius-md);
   padding: 12px 14px;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--amber-text);
   line-height: 1.5;
 }
@@ -135,7 +135,7 @@
   padding: 32px;
   text-align: center;
   color: var(--muted-foreground);
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .emptyAction {

src/features/providers/components/ProviderResourcePanel.tsx

@@ -93,7 +93,7 @@ export function ProviderResourcePanel({
           {group.id !== 'ampcode' ? (
             <div className={styles.searchWrap}>
               <span className={styles.searchIcon} aria-hidden="true">
-                <IconSearch size={14} />
+                <IconSearch size={16} />
               </span>
               <input
                 type="search"
@@ -141,15 +141,15 @@ export function ProviderResourcePanel({
                 display: 'inline-flex',
                 alignItems: 'center',
                 gap: 6,
-                padding: '6px 12px',
+                padding: '7px 13px',
                 borderRadius: 'var(--radius-md)',
                 border: '1px solid var(--border-color)',
                 background: 'var(--bg-primary)',
                 cursor: 'pointer',
-                fontSize: 13,
+                fontSize: 14,
               }}
             >
-              <IconPlus size={14} />
+              <IconPlus size={16} />
               <span>{t('providersPage.actions.new')}</span>
             </button>
           </div>

src/features/providers/components/ProviderResourceTable.module.scss

@@ -18,7 +18,7 @@
 }
 
 .primarySub {
-  font-size: 11px;
+  font-size: 12px;
   color: var(--muted-foreground);
   font-family: $font-mono;
   overflow: hidden;
@@ -29,7 +29,7 @@
 
 .baseUrl {
   font-family: $font-mono;
-  font-size: 11px;
+  font-size: 12px;
   color: var(--muted-foreground);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -40,12 +40,12 @@
 .chip {
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
+  padding: 3px 9px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--muted-bg);
   color: var(--muted-foreground);
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .metricsCell {
@@ -59,11 +59,11 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
+  padding: 3px 9px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
   background: var(--muted-bg);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.4;
   white-space: nowrap;
 }
@@ -81,12 +81,12 @@
 .flagTag {
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
+  padding: 3px 9px;
   border-radius: var(--radius-md);
   border: 1px solid var(--primary-30);
   background: var(--primary-10);
   color: var(--primary-color);
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   line-height: 1.4;
   white-space: nowrap;
@@ -96,10 +96,10 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
+  padding: 3px 9px;
   border-radius: var(--radius-md);
   border: 1px solid;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
 }
@@ -122,9 +122,9 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
+  padding: 3px 9px;
   border-radius: 999px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
   border: 1px solid transparent;
@@ -173,8 +173,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   padding: 0;
   border: 1px solid transparent;
   border-radius: var(--radius-md);

src/features/providers/components/ProviderResourceTable.tsx

@@ -136,7 +136,7 @@ export function ProviderResourceTable({
     if (r.brand === 'ampcode' && r.flags.isPlaceholder) {
       return (
         <span className={`${styles.statusBadge} ${styles.statusDisabled}`}>
-          <IconAlertTriangle size={12} />
+          <IconAlertTriangle size={14} />
           {t('providersPage.status.notConfigured')}
         </span>
       );
@@ -144,14 +144,14 @@ export function ProviderResourceTable({
     if (r.disabled) {
       return (
         <span className={`${styles.statusBadge} ${styles.statusDisabled}`}>
-          <IconAlertTriangle size={12} />
+          <IconAlertTriangle size={14} />
           {t('providersPage.status.disabled')}
         </span>
       );
     }
     return (
       <span className={`${styles.statusBadge} ${styles.statusActive}`}>
-        <IconCheckCircle2 size={12} />
+        <IconCheckCircle2 size={14} />
         {t('providersPage.status.active')}
       </span>
     );
@@ -297,7 +297,7 @@ export function ProviderResourceTable({
                       onView(resource);
                     }}
                   >
-                    <IconEye size={14} />
+                    <IconEye size={16} />
                   </button>
                   <button
                     type="button"
@@ -310,7 +310,7 @@ export function ProviderResourceTable({
                       onEdit(resource);
                     }}
                   >
-                    <IconPencil size={14} />
+                    <IconPencil size={16} />
                   </button>
                   {isAmpcode ? (
                     <button
@@ -324,7 +324,7 @@ export function ProviderResourceTable({
                         onDelete(resource);
                       }}
                     >
-                      <IconTrash2 size={14} />
+                      <IconTrash2 size={16} />
                     </button>
                   ) : (
                     <button
@@ -338,7 +338,7 @@ export function ProviderResourceTable({
                         onDelete(resource);
                       }}
                     >
-                      <IconTrash2 size={14} />
+                      <IconTrash2 size={16} />
                     </button>
                   )}
                 </div>

src/features/providers/components/providerStatusBar.module.scss

@@ -50,7 +50,7 @@
   border: 1px solid var(--border-color);
   border-radius: 6px;
   padding: 6px 10px;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.5;
   white-space: nowrap;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -131,10 +131,10 @@
 .statusRate {
   display: inline-flex;
   align-items: center;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
-  padding: 1px 6px;
+  padding: 2px 7px;
   border-radius: 4px;
   background: var(--bg-tertiary);
   color: var(--text-secondary);