Fix: responsive layout for CardHeader (small/medium/large screens)

This commit is contained in:
Pallavi
2025-08-19 03:53:49 +05:30
parent ac8b546393
commit b4be620a5b

View File

@@ -665,22 +665,21 @@ export default function SitesTable({
className="w-full" className="w-full"
onValueChange={handleTabChange} onValueChange={handleTabChange}
> >
<CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-0"> <CardHeader className="flex flex-col items-center gap-4 md:items-stretch lg:flex-row lg:items-center lg:justify-between pb-0">
<div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2"> <div className="flex flex-col items-center gap-3 w-full md:flex-row md:justify-center lg:justify-start lg:w-auto lg:mr-2">
{getSearchInput()} <div className="w-full md:w-auto lg:w-auto">{getSearchInput()}</div>
{env.flags.enableClients && ( {env.flags.enableClients && (
<TabsList className="grid grid-cols-2"> <TabsList className="grid grid-cols-2 w-full md:w-auto">
<TabsTrigger value="proxy"> <TabsTrigger value="proxy" className="w-full">
{t("resourcesTableProxyResources")} {t("resourcesTableProxyResources")}
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="internal"> <TabsTrigger value="internal" className="w-full">
{t("resourcesTableClientResources")} {t("resourcesTableClientResources")}
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
)} )}
</div> </div>
<div className="flex items-center gap-2 sm:justify-end"> <div className="flex justify-center w-full md:justify-center lg:justify-end lg:w-auto">
{getActionButton()} {getActionButton()}
</div> </div>
</CardHeader> </CardHeader>
@@ -700,12 +699,12 @@ export default function SitesTable({
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
header header
.column .column
.columnDef .columnDef
.header, .header,
header.getContext() header.getContext()
)} )}
</TableHead> </TableHead>
) )
)} )}
@@ -798,12 +797,12 @@ export default function SitesTable({
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
header header
.column .column
.columnDef .columnDef
.header, .header,
header.getContext() header.getContext()
)} )}
</TableHead> </TableHead>
) )
)} )}