From 9d4fb471286099adb98d511ba6cabf1d8dc6958a Mon Sep 17 00:00:00 2001
From: mroops0111 <mroops0111@gmail.com>
Date: Fri, 11 Sep 2026 10:20:18 +0800
Subject: [PATCH] fix(studio): let the auto-join toggle show what it just saved

The toggle reads whether the workspace admits everyone from the
workspace itself, but the callback it was given only refreshed the
member list beside it. So a save landed on the server and the
checkbox snapped straight back, which reads as a control that cannot
be pressed rather than one whose answer arrived late.

Admitting everyone also backfills the member list, so that one save
leaves both stale, and the refresh belongs to the pair rather than to
either caller.

The box beside the label was also sitting high. Its nudge assumed the
line box came from the small text inside the label, where a label
carries the strut of whatever it inherits and a span cannot shrink it.
Putting the size on the row makes the line the height the nudge
already expected.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JXXoZwM5RfHUzW6vScoeqv
---
 .../src/components/WorkspaceDetailsSheet.tsx   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/studio/src/components/WorkspaceDetailsSheet.tsx b/packages/studio/src/components/WorkspaceDetailsSheet.tsx
index e1ccddf5..584981e9 100644
--- a/packages/studio/src/components/WorkspaceDetailsSheet.tsx
+++ b/packages/studio/src/components/WorkspaceDetailsSheet.tsx
@@ -866,8 +866,12 @@ function MembersSection({ workspaceId }: { workspaceId: string }) {
   const policy = useWorkspacePolicy(workspaceId)
   const canManageMembers = policy.can('workspace.manage')
 
+  // Admitting everyone edits the workspace itself and backfills the list,
+  // so one such save leaves both of them stale,
+  // and the toggle below reads its own state from the workspace rather than here.
   function invalidate() {
     queryClient.invalidateQueries({ queryKey: queryKeys.workspaceMembers(workspaceId) })
+    queryClient.invalidateQueries({ queryKey: queryKeys.workspaces() })
   }
 
   if (isLoading) {
@@ -945,20 +949,24 @@ function AutoJoinControl({ workspaceId, onChanged }: {
   })
 
   return (
-    <div className="mt-3 flex items-start gap-2 border-t border-border pt-3">
+    // The size sits on the row, not on the two spans inside it.
+    // A label carries the strut of whatever it inherits,
+    // so a span cannot shrink the line box, and the box beside it
+    // ends up centred on a taller line than the one it can see.
+    <div className="mt-3 flex items-start gap-2 border-t border-border pt-3 text-2xs">
       <input
         type="checkbox"
         id={`auto-join-${workspaceId}`}
         checked={admitting}
         disabled={save.isPending}
         onChange={event => save.mutate(event.target.checked)}
-        className="mt-0.5 size-3 accent-primary"
+        className="mt-0.5 size-3 shrink-0 accent-primary"
       />
-      <label className="flex-1" htmlFor={`auto-join-${workspaceId}`}>
-        <span className="text-2xs font-medium text-foreground">
+      <label className="flex flex-1 flex-col gap-0.5" htmlFor={`auto-join-${workspaceId}`}>
+        <span className="font-medium text-foreground">
           {t('workspace.details.autoJoinTitle')}
         </span>
-        <span className="mt-0.5 block text-2xs leading-relaxed text-muted-foreground">
+        <span className="leading-relaxed text-muted-foreground">
           {t('workspace.details.autoJoinHint')}
         </span>
       </label>