1
0
forked from baron/baron-sso

style: perfectly align title, description, and search controls in a single row

- Use flex-row and items-baseline to seamlessly integrate the title and description.
- Remove input labels to streamline the search bar vertically.
- Apply mr-auto to the title group to push the search controls exactly to the right while keeping everything on the same horizontal baseline.
This commit is contained in:
2026-05-06 16:11:10 +09:00
parent 92c547db3c
commit 97fb89b831
2 changed files with 37 additions and 47 deletions

View File

@@ -474,35 +474,30 @@ function TenantListPage() {
</header>
<Card className="bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
<CardHeader className="flex flex-wrap items-end gap-8 flex-shrink-0">
<div>
<CardTitle>
<CardHeader className="flex flex-row items-center gap-4 py-4 flex-wrap flex-shrink-0">
<div className="flex items-baseline gap-3 flex-shrink-0 mr-auto">
<CardTitle className="text-lg m-0">
{t("ui.admin.tenants.registry.title", "Tenant Registry")}
</CardTitle>
<CardDescription>
<CardDescription className="m-0">
{t("msg.admin.tenants.registry.count", "총 {{count}}개 테넌트", {
count: query.data?.total ?? 0,
})}
</CardDescription>
</div>
<div className="flex items-end gap-4">
<div className="relative flex-1 min-w-[240px] max-w-sm">
<label className="text-xs font-medium text-muted-foreground mb-1.5 block">
{t("ui.admin.tenants.list.search_label", "테넌트 검색")}
</label>
<div className="relative">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder={t(
"ui.admin.tenants.list.search_placeholder",
"테넌트 이름 또는 슬러그 검색...",
)}
className="pl-9"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div className="flex items-center gap-3">
<div className="relative w-[280px]">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
placeholder={t(
"ui.admin.tenants.list.search_placeholder",
"테넌트 이름 또는 슬러그 검색...",
)}
className="pl-9 h-9"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
</div>
</CardHeader>