make actions sticky in targets and rules input

This commit is contained in:
miloschwartz
2025-11-08 14:39:14 -08:00
parent 10f8298161
commit 693c9fbe0f
6 changed files with 113 additions and 85 deletions

View File

@@ -1420,9 +1420,12 @@ export default function ReverseProxyTargets(props: {
.map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map(
(header) => (
(header) => {
const isActionsColumn = header.column.id === "actions";
return (
<TableHead
key={header.id}
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
>
{header.isPlaceholder
? null
@@ -1434,7 +1437,8 @@ export default function ReverseProxyTargets(props: {
header.getContext()
)}
</TableHead>
)
);
}
)}
</TableRow>
))}
@@ -1447,11 +1451,14 @@ export default function ReverseProxyTargets(props: {
<TableRow key={row.id}>
{row
.getVisibleCells()
.map((cell) => (
.map((cell) => {
const isActionsColumn = cell.column.id === "actions";
return (
<TableCell
key={
cell.id
}
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
>
{flexRender(
cell
@@ -1461,7 +1468,8 @@ export default function ReverseProxyTargets(props: {
cell.getContext()
)}
</TableCell>
))}
);
})}
</TableRow>
))
) : (

View File

@@ -832,7 +832,7 @@ export default function ResourceRules(props: {
/>
<Button
type="submit"
variant="secondary"
variant="outline"
disabled={!rulesEnabled}
>
{t('ruleSubmit')}
@@ -844,8 +844,13 @@ export default function ResourceRules(props: {
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{headerGroup.headers.map((header) => {
const isActionsColumn = header.column.id === "actions";
return (
<TableHead
key={header.id}
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
>
{header.isPlaceholder
? null
: flexRender(
@@ -854,7 +859,8 @@ export default function ResourceRules(props: {
header.getContext()
)}
</TableHead>
))}
);
})}
</TableRow>
))}
</TableHeader>
@@ -862,14 +868,20 @@ export default function ResourceRules(props: {
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{row.getVisibleCells().map((cell) => {
const isActionsColumn = cell.column.id === "actions";
return (
<TableCell
key={cell.id}
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
);
})}
</TableRow>
))
) : (

View File

@@ -1608,11 +1608,14 @@ export default function Page() {
{headerGroup.headers.map(
(
header
) => (
) => {
const isActionsColumn = header.column.id === "actions";
return (
<TableHead
key={
header.id
}
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
>
{header.isPlaceholder
? null
@@ -1624,7 +1627,8 @@ export default function Page() {
header.getContext()
)}
</TableHead>
)
);
}
)}
</TableRow>
)
@@ -1647,11 +1651,14 @@ export default function Page() {
.map(
(
cell
) => (
) => {
const isActionsColumn = cell.column.id === "actions";
return (
<TableCell
key={
cell.id
}
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""}
>
{flexRender(
cell
@@ -1661,7 +1668,8 @@ export default function Page() {
cell.getContext()
)}
</TableCell>
)
);
}
)}
</TableRow>
)

View File

@@ -552,7 +552,7 @@ export default function ClientsTable({
<div className="flex flex-col items-end gap-1 p-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 w-7 p-0">
<Button variant="ghost" size="sm" className="h-7 w-7 p-0">
<Columns className="h-4 w-4" />
<span className="sr-only">
{t("columns") || "Columns"}

View File

@@ -769,7 +769,7 @@ export default function ResourcesTable({
<div className="flex flex-col items-end gap-1 p-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 w-7 p-0">
<Button variant="ghost" size="sm" className="h-7 w-7 p-0">
<Columns className="h-4 w-4" />
<span className="sr-only">
{t("columns") || "Columns"}

View File

@@ -417,7 +417,7 @@ export function DataTable<TData, TValue>({
<div className="flex flex-col items-end pr-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-7 w-7 p-0 mb-1">
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 mb-1">
<Columns className="h-4 w-4" />
<span className="sr-only">
{t("columns") || "Columns"}