style(cua): align permission controls and configured states

packages/experimental/cua/src/client/PermissionPanel.module.css

@@ -33,14 +33,15 @@
 }
 .applicationBadge img { flex-shrink: 0; object-fit: contain; }
 .applicationBadge > span { min-width: 0; overflow-wrap: anywhere; }
-.permissionAction { min-width: 120px; }
+.permissionAction, .buttonPlaceholder { width: 168px; flex-shrink: 0; }
+.permissionAction[data-configured]:disabled { opacity: 1; color: var(--dsw-alias-label-primary); cursor: default; }
 .buttonPlaceholder, .appPlaceholder, .appsPlaceholder {
   display: inline-block;
   max-width: 100%;
   border-radius: var(--dsw-radius-xs);
   background: var(--dsw-alias-bg-skeleton);
 }
-.buttonPlaceholder { width: 120px; height: 28px; }
+.buttonPlaceholder { height: 28px; }
 .appPlaceholder { width: 160px; height: 20px; }
 .appsPlaceholder { width: 240px; height: 40px; }
 

packages/experimental/cua/src/client/PermissionPanel.tsx

@@ -62,7 +62,7 @@ function ConfigurationSetting({ kind, status, loading, writable, configured, sav
     <div className={css.permission}>
       <div><strong>{t(`${kind}Title`)}</strong><p>{t(`${kind}Body`)}</p></div>
       {loading ? <span className={css.buttonPlaceholder} aria-hidden />
-        : <Button size="sm" variant={configured ? 'outline' : 'primary'} disabled={saving || configured || !writable || status !== 'ready'}
+        : <Button size="sm" className={css.permissionAction} data-configured={configured || undefined} variant={configured ? 'outline' : 'primary'} disabled={saving || configured || !writable || status !== 'ready'}
           onClick={() => { void submit() }}>{t(configured ? `${kind}Set` : `${kind}Confirm`)}</Button>}
     </div>
     {!configured && (status === 'unavailable' ? <p className={css.error} role="alert">{t(`${kind}Unavailable`)}</p>