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