From 24155cad664e8b36d6f44ce0649ce1b72187ecc3 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Sun, 17 May 2026 04:13:02 -0400
Subject: [PATCH] fix(stacks): prevent right-side clipping in Create Stack
 modal (#1081)

The "From Docker Run" tab's converted compose.yaml preview uses
<pre whitespace-pre> inside a ScrollArea that defaulted to
overflow-x: hidden. Long YAML lines (long env values, long volume
paths) were silently clipped on the right with no horizontal scroll
affordance, and Radix's display: table viewport child propagated the
overflow back up the chain, pushing the form's ModalBody past the
dialog's 576px max-width.

Opt into the ScrollArea component's existing `block` prop on the
YAML preview and on both tabpanel form ScrollAreas. `block` switches
the viewport child to display: block; min-w-0 and renders a
horizontal ScrollBar (Radix mounts it only when content actually
overflows). DOM trace confirms the outer `block` is load-bearing
when the inner pre is wider than the viewport.

Matches the established pattern used by VulnerabilityScanSheet,
ScanComparisonSheet, and SecurityHistoryView.
---
 frontend/src/components/EditorLayout/CreateStackDialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/EditorLayout/CreateStackDialog.tsx b/frontend/src/components/EditorLayout/CreateStackDialog.tsx
index f20237a4..3ebe660a 100644
--- a/frontend/src/components/EditorLayout/CreateStackDialog.tsx
+++ b/frontend/src/components/EditorLayout/CreateStackDialog.tsx
@@ -319,7 +319,7 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
 
             {createMode === 'git' && (
                 <div role="tabpanel" id={panelId('git')} aria-labelledby={tabId('git')}>
-                    <ScrollArea className="max-h-[60vh]">
+                    <ScrollArea block className="max-h-[60vh]">
                         <ModalBody>
                             <div className="space-y-2">
                                 <Label htmlFor="create-git-stack-name">Stack Name</Label>
@@ -387,7 +387,7 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
 
             {createMode === 'docker-run' && (
                 <div role="tabpanel" id={panelId('docker-run')} aria-labelledby={tabId('docker-run')}>
-                    <ScrollArea className="max-h-[60vh]">
+                    <ScrollArea block className="max-h-[60vh]">
                         <ModalBody>
                             <div className="space-y-2">
                                 <Label htmlFor="create-dr-stack-name">Stack Name</Label>
@@ -431,7 +431,7 @@ export function CreateStackDialog({ open, onOpenChange, onStackCreated, onStacks
                             {convertedYaml !== null && (
                                 <div className="space-y-2">
                                     <Label>compose.yaml preview</Label>
-                                    <ScrollArea className="max-h-[240px] rounded-md border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
+                                    <ScrollArea block className="max-h-[240px] rounded-md border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
                                         <pre className="px-3 py-2 text-xs font-mono whitespace-pre leading-relaxed">
                                             {convertedYaml}
                                         </pre>