From 29300b4df940282f4de5d01685819ff2433cb288 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Fri, 17 Jul 2026 12:56:46 +0700
Subject: [PATCH] fix(ui): let the list empty states centre themselves like the
 primitive intends
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Empty declares `flex-1 … justify-center` (empty.tsx:9), but the list pages wrapped
it in a plain `flex flex-col`, so it collapsed to its natural height and hugged the
header while api-tokens — same primitive, same "nothing yet + CTA" shape — centred
in its `flex-1` wrapper. At 1920 the CTA jumped ~350px between the two pages.

The five wrappers on knowledges, templates and flows (loading + empty states) now
carry flex-1 like the eight that already did. SidebarInset is `min-h-svh flex-1
flex-col`, so the height is there to fill. Measured at 1920: knowledges and
templates now report the same 564 centre / 24px offset as api-tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/flows/flows.tsx           | 4 ++--
 frontend/src/pages/knowledges/knowledges.tsx | 4 ++--
 frontend/src/pages/templates/templates.tsx   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/flows/flows.tsx b/frontend/src/pages/flows/flows.tsx
index 1865bda9..6dd36bd0 100644
--- a/frontend/src/pages/flows/flows.tsx
+++ b/frontend/src/pages/flows/flows.tsx
@@ -589,7 +589,7 @@ function Flows() {
         return (
             <>
                 {pageHeader}
-                <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-1 flex-col gap-4 p-4">
                     <Empty>
                         <EmptyHeader>
                             <EmptyMedia>
@@ -611,7 +611,7 @@ function Flows() {
         return (
             <>
                 {pageHeader}
-                <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-1 flex-col gap-4 p-4">
                     <Empty>
                         <EmptyHeader>
                             <EmptyMedia variant="icon">
diff --git a/frontend/src/pages/knowledges/knowledges.tsx b/frontend/src/pages/knowledges/knowledges.tsx
index f6d2f9ed..8afec9e0 100644
--- a/frontend/src/pages/knowledges/knowledges.tsx
+++ b/frontend/src/pages/knowledges/knowledges.tsx
@@ -404,7 +404,7 @@ function Knowledges() {
         return (
             <>
                 {pageHeader}
-                <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-1 flex-col gap-4 p-4">
                     <Empty>
                         <EmptyHeader>
                             <EmptyMedia>
@@ -426,7 +426,7 @@ function Knowledges() {
         return (
             <>
                 {pageHeader}
-                <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-1 flex-col gap-4 p-4">
                     <Empty>
                         <EmptyHeader>
                             <EmptyMedia variant="icon">
diff --git a/frontend/src/pages/templates/templates.tsx b/frontend/src/pages/templates/templates.tsx
index d5900cba..8ba09f93 100644
--- a/frontend/src/pages/templates/templates.tsx
+++ b/frontend/src/pages/templates/templates.tsx
@@ -268,7 +268,7 @@ function Templates() {
         return (
             <>
                 {pageHeader}
-                <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-1 flex-col gap-4 p-4">
                     <Empty>
                         <EmptyHeader>
                             <EmptyMedia variant="icon">