adjust targets input styles

This commit is contained in:
miloschwartz
2026-06-05 12:42:52 -07:00
parent b78db3daef
commit ea8eaf9736
2 changed files with 123 additions and 80 deletions

View File

@@ -10,7 +10,10 @@ import {
PathRewriteDisplay,
PathRewriteModal
} from "@app/components/PathMatchRenameModal";
import { ResourceTargetAddressItem } from "@app/components/resource-target-address-item";
import {
ResourceTargetAddressItem,
ResourceTargetSiteItem
} from "@app/components/resource-target-address-item";
import {
SettingsSection,
SettingsSectionBody,
@@ -65,6 +68,7 @@ import {
useMemo,
useState
} from "react";
import { maxSize } from "zod";
export type LocalTarget = Omit<
ArrayElement<ListTargetsResponse["targets"]> & {
@@ -269,7 +273,7 @@ export function ProxyResourceTargetsForm({
const priorityColumn: ColumnDef<LocalTarget> = {
id: "priority",
header: () => (
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 p-3">
{t("priority")}
<TooltipProvider>
<Tooltip>
@@ -285,7 +289,6 @@ export function ProxyResourceTargetsForm({
),
cell: ({ row }) => {
return (
<div className="flex items-center justify-center w-full">
<Input
type="number"
min="1"
@@ -303,7 +306,6 @@ export function ProxyResourceTargetsForm({
}
}}
/>
</div>
);
},
size: 120,
@@ -437,13 +439,12 @@ export function ProxyResourceTargetsForm({
maxSize: 200
};
const addressColumn: ColumnDef<LocalTarget> = {
accessorKey: "address",
header: () => <span className="p-3">{t("address")}</span>,
const siteColumn: ColumnDef<LocalTarget> = {
accessorKey: "site",
header: () => <span className="p-3">{t("site")}</span>,
cell: ({ row }) => {
return (
<ResourceTargetAddressItem
isHttp={isHttp}
<ResourceTargetSiteItem
orgId={orgId}
getDockerStateForSite={getDockerStateForSite}
proxyTarget={row.original}
@@ -452,9 +453,26 @@ export function ProxyResourceTargetsForm({
/>
);
},
size: 400,
minSize: 350,
maxSize: 500
size: 220,
minSize: 180,
maxSize: 280
};
const addressColumn: ColumnDef<LocalTarget> = {
accessorKey: "address",
header: () => <span className="p-3">{t("address")}</span>,
cell: ({ row }) => {
return (
<ResourceTargetAddressItem
isHttp={isHttp}
proxyTarget={row.original}
updateTarget={updateTarget}
/>
);
},
size: 350,
minSize: 300,
maxSize: 450
};
const rewritePathColumn: ColumnDef<LocalTarget> = {
@@ -567,6 +585,7 @@ export function ProxyResourceTargetsForm({
if (isAdvancedMode) {
const cols = [
siteColumn,
addressColumn,
healthCheckColumn,
enabledColumn,
@@ -575,12 +594,13 @@ export function ProxyResourceTargetsForm({
if (isHttp) {
cols.unshift(matchPathColumn);
cols.splice(3, 0, rewritePathColumn, priorityColumn);
cols.splice(4, 0, rewritePathColumn, priorityColumn);
}
return cols;
} else {
return [
siteColumn,
addressColumn,
healthCheckColumn,
enabledColumn,
@@ -818,6 +838,10 @@ export function ProxyResourceTargetsForm({
header.column
.id ===
"actions";
const isSiteColumn =
header.column
.id ===
"site";
return (
<TableHead
key={
@@ -826,7 +850,9 @@ export function ProxyResourceTargetsForm({
className={
isActionsColumn
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
: ""
: isSiteColumn
? "w-45"
: ""
}
>
{header.isPlaceholder
@@ -858,6 +884,10 @@ export function ProxyResourceTargetsForm({
cell.column
.id ===
"actions";
const isSiteColumn =
cell.column
.id ===
"site";
return (
<TableCell
key={
@@ -866,7 +896,9 @@ export function ProxyResourceTargetsForm({
className={
isActionsColumn
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
: ""
: isSiteColumn
? "w-45"
: ""
}
>
{flexRender(