From ae2f584de88f0b0eb34ec270c9dfb109cab54938 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Tue, 4 Aug 2026 17:13:36 +0000
Subject: [PATCH] fix: keep the token scope builder inside its panel when
 scopes get long (#10517)

* fix: keep the token scope builder inside its panel when scopes get long

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: label the scope path popover 'Add path' once paths exist

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../lib/components/common/modal/Modal.svelte  |  4 +-
 .../components/settings/CreateToken.svelte    |  4 +-
 .../components/settings/ScopeSelector.svelte  | 84 ++++++++-----------
 3 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index 0b365669a5..d718c3c1bd 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -138,7 +138,9 @@
 									>
 								{/if}
 								<div class="flex">
-									<div class="text-left flex-1">
+									<!-- min-w-0: without it this flex item takes its content's min-content width and
+									     stretches the modal past its max-width instead of letting content shrink. -->
+									<div class="text-left flex-1 min-w-0">
 										<div class="flex flex-row items-center justify-between">
 											<h3 class="text-emphasis text-lg font-semibold">{title}</h3>
 											{@render settings?.()}
diff --git a/frontend/src/lib/components/settings/CreateToken.svelte b/frontend/src/lib/components/settings/CreateToken.svelte
index 14920e96e9..444e245bee 100644
--- a/frontend/src/lib/components/settings/CreateToken.svelte
+++ b/frontend/src/lib/components/settings/CreateToken.svelte
@@ -173,7 +173,9 @@
 </script>
 
 <div>
-	<div class="p-4 rounded-md mb-6 min-w-min bg-surface-tertiary">
+	<!-- Stays bounded by the panel width: a content-driven width (min-w-min) would let a long
+	     scope chip stretch this card and push the rest of the form out of view. -->
+	<div class="p-4 rounded-md mb-6 bg-surface-tertiary">
 		<h3 class="pb-2 font-semibold text-emphasis text-sm">{title}</h3>
 
 		{#if showMcpMode && !mcpOnly}
diff --git a/frontend/src/lib/components/settings/ScopeSelector.svelte b/frontend/src/lib/components/settings/ScopeSelector.svelte
index 91a62e65f7..a900d9a65d 100644
--- a/frontend/src/lib/components/settings/ScopeSelector.svelte
+++ b/frontend/src/lib/components/settings/ScopeSelector.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { type ScopeDomain, type ScopeDefinition, TokenService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
-	import { ChevronRight, Loader2, X } from 'lucide-svelte'
+	import { ChevronRight, Loader2, Plus, X } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
 	import Popover from '../meltComponents/Popover.svelte'
 	import Tooltip from '../Tooltip.svelte'
@@ -490,6 +490,25 @@
 	fetchScopeDomains()
 </script>
 
+<!-- The label can be a long comma-joined path list: it has to truncate rather than widen its
+     container, which would push the per-scope "Restrict paths" buttons out of the panel. -->
+{#snippet scopeChip(label: string, removeTitle: string, onRemove: (e: MouseEvent) => void)}
+	<span
+		class="inline-flex items-center gap-1 min-w-0 max-w-full px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded font-mono"
+	>
+		<span class="truncate" title={label}>{label}</span>
+		<button
+			type="button"
+			onclick={onRemove}
+			class="text-blue-600 hover:text-blue-800 flex-shrink-0"
+			title={removeTitle}
+			{disabled}
+		>
+			<X size={10} />
+		</button>
+	</span>
+{/snippet}
+
 <div class="w-full {className} p-2">
 	{#if loading}
 		<div class="flex items-center justify-center py-12">
@@ -518,20 +537,7 @@
 			{:else}
 				<div class="flex flex-wrap gap-2">
 					{#each selectedScopes.slice(0, 10) as scope}
-						<span
-							class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded font-mono"
-						>
-							{scope}
-							<button
-								type="button"
-								onclick={() => removeSelectedScope(scope)}
-								class="text-blue-600 hover:text-blue-800 flex-shrink-0"
-								title="Remove scope"
-								{disabled}
-							>
-								<X size={10} />
-							</button>
-						</span>
+						{@render scopeChip(scope, 'Remove scope', () => removeSelectedScope(scope))}
 					{/each}
 					{#if selectedScopes.length > 10}
 						<span
@@ -597,23 +603,10 @@
 										{domain.name}
 									</label>
 									{#each selectedScopes as scope}
-										<span
-											class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded font-mono"
-										>
-											{scope}
-											<button
-												type="button"
-												onclick={(e) => {
-													e.stopPropagation()
-													removeSelectedScope(scope)
-												}}
-												class="text-blue-600 hover:text-blue-800 flex-shrink-0"
-												title="Remove scope"
-												{disabled}
-											>
-												<X size={10} />
-											</button>
-										</span>
+										{@render scopeChip(scope, 'Remove scope', (e) => {
+											e.stopPropagation()
+											removeSelectedScope(scope)
+										})}
 									{/each}
 								</div>
 								{#if domain.description}
@@ -672,8 +665,15 @@
 														contentClasses="p-3"
 													>
 														{#snippet trigger()}
-															<Button size="xs" disabled={isDisabled} variant="default">
-																Restrict paths
+															<Button
+																size="xs"
+																disabled={isDisabled}
+																variant="default"
+																startIcon={resourcePathArray.length > 0
+																	? { icon: Plus }
+																	: undefined}
+															>
+																{resourcePathArray.length > 0 ? 'Add path' : 'Restrict paths'}
 																<Tooltip light>
 																	Restrict this scope to specific resource paths. If no paths are
 																	specified, the scope gives full access.
@@ -724,19 +724,9 @@
 										{#if scope.requires_resource_path && resourcePathArray.length > 0}
 											<div class="flex flex-wrap gap-1 mt-2">
 												{#each resourcePathArray as path}
-													<span
-														class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded font-mono"
-													>
-														{path}
-														<button
-															type="button"
-															onclick={() => removeResourcePath(scope.value, path)}
-															class="text-blue-600 hover:text-blue-800 flex-shrink-0"
-															title="Remove path"
-														>
-															<X size={10} />
-														</button>
-													</span>
+													{@render scopeChip(path, 'Remove path', () =>
+														removeResourcePath(scope.value, path)
+													)}
 												{/each}
 											</div>
 										{/if}