From 67a4e2c5efe5a7fac9a12db862d79dcc3ff4a2dd Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Mon, 31 Aug 2026 23:39:49 +0200
Subject: [PATCH] fix(ui): scroll a wide code preview instead of widening its
 modal

---
 frontend/src/lib/components/DBTableEditor.svelte            | 6 ++----
 .../common/confirmationModal/ConfirmationModal.svelte       | 2 +-
 .../src/lib/components/datatableAcl/PgGrantBuilder.svelte   | 2 +-
 .../workspaceSettings/DataTablePermissionsButton.svelte     | 5 ++---
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/DBTableEditor.svelte b/frontend/src/lib/components/DBTableEditor.svelte
index de3106d5ad..4eb07aea5f 100644
--- a/frontend/src/lib/components/DBTableEditor.svelte
+++ b/frontend/src/lib/components/DBTableEditor.svelte
@@ -503,7 +503,7 @@
 		{/if}
 		{#if askingForConfirmation?.codeContent}
 			<div
-				class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative group"
+				class="bg-surface-secondary border border-surface-selected rounded-md p-2 relative group min-w-0"
 			>
 				<button
 					class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-surface-hover"
@@ -512,9 +512,7 @@
 				>
 					<ClipboardCopy size={14} />
 				</button>
-				<pre class="whitespace-pre-wrap text-sm"
-					><code>{askingForConfirmation.codeContent}</code></pre
-				>
+				<pre class="overflow-x-auto text-sm"><code>{askingForConfirmation.codeContent}</code></pre>
 			</div>
 		{/if}
 	</ConfirmationModal>
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 56244632ef..b9d393035b 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -175,7 +175,7 @@
 									<Icon class={theme[type].classes.icon} />
 								</div>
 							{/if}
-							<div class={twMerge('ml-0 text-left flex-1 ', showIcon ? 'ml-4' : '')}>
+							<div class={twMerge('ml-0 text-left flex-1 min-w-0', showIcon ? 'ml-4' : '')}>
 								<h3 class="text-lg font-medium text-primary">
 									{title}
 								</h3>
diff --git a/frontend/src/lib/components/datatableAcl/PgGrantBuilder.svelte b/frontend/src/lib/components/datatableAcl/PgGrantBuilder.svelte
index 164170ebff..93cda95317 100644
--- a/frontend/src/lib/components/datatableAcl/PgGrantBuilder.svelte
+++ b/frontend/src/lib/components/datatableAcl/PgGrantBuilder.svelte
@@ -87,6 +87,6 @@
 		</Button>
 	</div>
 	{#if statement}
-		<pre class="text-2xs text-tertiary whitespace-pre-wrap">{statement}</pre>
+		<pre class="text-2xs text-tertiary overflow-x-auto">{statement}</pre>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/workspaceSettings/DataTablePermissionsButton.svelte b/frontend/src/lib/components/workspaceSettings/DataTablePermissionsButton.svelte
index 061a64591a..a4164bbbd7 100644
--- a/frontend/src/lib/components/workspaceSettings/DataTablePermissionsButton.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DataTablePermissionsButton.svelte
@@ -382,7 +382,7 @@
 		onConfirmed={apply}
 		onCanceled={() => (preview = undefined)}
 	>
-		<div class="flex flex-col gap-3">
+		<div class="flex flex-col gap-3 min-w-0">
 			{#each preview?.warnings ?? [] as warning}
 				<Alert type="warning" title="Warning" size="xs">{warning}</Alert>
 			{/each}
@@ -394,8 +394,7 @@
 				<span class="text-sm text-secondary">
 					The following runs against <span class="font-mono">{datatable}</span> in a single transaction:
 				</span>
-				<pre
-					class="whitespace-pre-wrap overflow-y-auto text-xs bg-surface-secondary p-3 rounded select-all max-h-80"
+				<pre class="overflow-auto text-xs bg-surface-secondary p-3 rounded select-all max-h-80"
 					>{preview.statements.join('\n')}</pre
 				>
 			{/if}