mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(frontend): compact CTE plan spacing

Browse Source
This commit is contained in:
User
2026-07-15 12:09:04 +02:00
parent 00c1af5a5a
commit 6b0da84a3d
2 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/viewers/CtePlanViewer.tsx
+6 -6
View File
@@ -16,7 +16,7 @@ function FilterRow({ filter, index }: { filter: CtePlanFilter; index: number })
<div
role="group"
aria-label={`Filter ${index}`}
className="min-w-0 space-y-3 p-3 sm:p-4"
className="min-w-0 space-y-3 px-3 py-2 sm:px-4"
>
<div className="grid min-w-0 grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_minmax(5rem,auto)_minmax(0,1fr)]">
<div className="min-w-0 space-y-1">
@@ -39,7 +39,7 @@ function FilterRow({ filter, index }: { filter: CtePlanFilter; index: number })
</div>
</div>
{(filter.description || filter.rationale) && (
<div className="grid min-w-0 gap-x-4 gap-y-2 border-t border-border/50 pt-3 md:grid-cols-[5.5rem_minmax(0,1fr)]">
<div className="grid min-w-0 gap-x-4 gap-y-2 border-t border-border/50 pt-2 md:grid-cols-[5.5rem_minmax(0,1fr)]">
{filter.description && (
<>
<span className={FIELD_LABEL}>Description</span>
@@ -67,7 +67,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
return (
<Card className="gap-0 rounded-lg border py-0 shadow-none">
<CardHeader className="gap-3 rounded-t-lg border-b border-border/60 bg-muted/15 p-4 sm:p-5 sm:[&.border-b]:pb-5">
<CardHeader className="gap-3 rounded-t-lg border-b border-border/60 bg-muted/15 px-3 py-2 sm:px-4 [&.border-b]:pb-2">
<div className="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5">
<Badge variant="outline" className="font-mono">
CTE {cte.index}/{total}
@@ -82,7 +82,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
</p>
)}
</CardHeader>
<CardContent className="flex min-w-0 flex-col gap-5 p-4 sm:p-5">
<CardContent className="flex min-w-0 flex-col gap-5 px-3 py-2 sm:px-4">
<div className="grid min-w-0 gap-4 md:grid-cols-2">
<section className="min-w-0">
<h4 className="thot-label mb-2">Depends on</h4>
@@ -116,7 +116,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
{cte.tables.map((table) => (
<div
key={table.name}
className="grid min-w-0 gap-1 p-3 sm:p-4 md:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] md:gap-4"
className="grid min-w-0 gap-1 px-3 py-2 sm:px-4 md:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] md:gap-4"
>
<code className="min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere] font-mono text-xs leading-relaxed text-foreground">
{table.name}
@@ -155,7 +155,7 @@ function CteCard({ cte, total }: { cte: CtePlanCte; total: number }) {
)}
{cte.rationale && (
<section className="min-w-0 border-t border-border/60 pt-4">
<section className="min-w-0 border-t border-border/60 pt-2">
<h4 className="thot-label mb-1.5">Rationale</h4>
<p className="whitespace-pre-wrap [overflow-wrap:anywhere] text-sm leading-relaxed text-foreground/90">
{cte.rationale}