Fix instructions page Advanced section layout: 3-column grid, truncate root path

- Use a 3-column grid (Mode | Root path | Entry file) instead of stacked layout
- Truncate long managed root path with hover tooltip instead of break-all wrapping
- Better spacing with grid gaps instead of space-y stacking

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-18 12:48:49 -05:00
parent 1e393bedb2
commit 10f26cfad9

View file

@ -1803,8 +1803,9 @@ function PromptsTab({
<ChevronRight className="h-3 w-3 transition-transform group-data-[state=open]:rotate-90" />
Advanced
</CollapsibleTrigger>
<CollapsibleContent className="pt-4 pb-6 space-y-5">
<CollapsibleContent className="pt-4 pb-6">
<TooltipProvider>
<div className="grid gap-x-6 gap-y-4 sm:grid-cols-[auto_1fr_1fr]">
<label className="space-y-1.5">
<span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
Mode
@ -1860,8 +1861,7 @@ function PromptsTab({
</Button>
</div>
</label>
<div className="grid gap-5 sm:grid-cols-2">
<label className="space-y-1.5">
<label className="space-y-1.5 min-w-0">
<span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
Root path
<Tooltip>
@ -1874,8 +1874,8 @@ function PromptsTab({
</Tooltip>
</span>
{currentMode === "managed" ? (
<div className="flex items-center gap-1.5 font-mono text-sm text-muted-foreground">
<span className="min-w-0 break-all">{currentRootPath || "(managed)"}</span>
<div className="flex items-center gap-1.5 font-mono text-xs text-muted-foreground pt-1.5">
<span className="min-w-0 truncate" title={currentRootPath || undefined}>{currentRootPath || "(managed)"}</span>
{currentRootPath && (
<CopyText text={currentRootPath} className="shrink-0">
<Copy className="h-3.5 w-3.5" />