Merge branch 'worktree-fix-permission-request-ui' into dev

src/renderer/components/team/ToolApprovalSheet.tsx

@@ -186,6 +186,10 @@ export const ToolApprovalSheet: React.FC = () => {
   const displayName = current.teamDisplayName ?? teamSummary?.displayName ?? current.teamName;
 
   return (
+    <>
+      {/* Backdrop overlay */}
+      <div className="fixed inset-0 z-[54] bg-black/40 duration-200 animate-in fade-in" />
+
       <div
         ref={containerRef}
         className={`fixed bottom-4 left-1/2 z-[55] w-full -translate-x-1/2 rounded-lg border shadow-xl outline-none transition-all duration-200 animate-in fade-in slide-in-from-bottom-4 ${diffExpanded ? 'max-w-screen-sm' : 'max-w-[480px]'}`}
@@ -323,19 +327,20 @@ export const ToolApprovalSheet: React.FC = () => {
               Allow all
             </button>
           </div>
+          <div className="flex items-center gap-2">
             {pendingApprovals.length > 1 && (
               <span className="text-[11px] text-[var(--color-text-muted)]">
                 {pendingApprovals.length - 1} pending
               </span>
             )}
-      </div>
-
-      {/* Settings panel (full-width, outside flex row) */}
             <ToolApprovalSettingsPanel />
+          </div>
+        </div>
 
         {/* Timeout progress bar */}
         <TimeoutProgress receivedAt={current.receivedAt} />
       </div>
+    </>
   );
 };
 

src/renderer/components/team/dialogs/ToolApprovalSettingsPanel.tsx

@@ -20,8 +20,8 @@ export const ToolApprovalSettingsPanel: React.FC = () => {
   const updateSettings = useStore((s) => s.updateToolApprovalSettings);
 
   return (
-    <div className="border-t px-4 py-2" style={{ borderColor: 'var(--color-border)' }}>
-      {/* Toggle button */}
+    <>
+      {/* Toggle button — rendered inline in parent layout */}
       <button
         type="button"
         onClick={() => setExpanded(!expanded)}
@@ -41,10 +41,10 @@ export const ToolApprovalSettingsPanel: React.FC = () => {
         {expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
       </button>
 
-      {/* Collapsible panel */}
+      {/* Collapsible panel — full-width, below toggle */}
       {expanded && (
         <div
-          className="mt-2 space-y-3 rounded-md border p-3"
+          className="mx-4 mb-2 mt-1 space-y-3 rounded-md border p-3"
           style={{
             backgroundColor: 'var(--color-surface)',
             borderColor: 'var(--color-border)',
@@ -160,6 +160,6 @@ export const ToolApprovalSettingsPanel: React.FC = () => {
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 };