From ea8eaf97361adef687e5a5d387676fa13005d217 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 5 Jun 2026 12:42:52 -0700
Subject: [PATCH] adjust targets input styles

---
 .../public/ProxyResourceTargetsForm.tsx       |  62 ++++++--
 .../resource-target-address-item.tsx          | 141 ++++++++++--------
 2 files changed, 123 insertions(+), 80 deletions(-)

diff --git a/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx b/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
index 7289c2767..d707996b5 100644
--- a/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
+++ b/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
@@ -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(
diff --git a/src/components/resource-target-address-item.tsx b/src/components/resource-target-address-item.tsx
index abd4ed45b..f6ebc5752 100644
--- a/src/components/resource-target-address-item.tsx
+++ b/src/components/resource-target-address-item.tsx
@@ -1,15 +1,12 @@
 import { cn } from "@app/lib/cn";
 import type { DockerState } from "@app/lib/docker";
 import { parseHostTarget } from "@app/lib/parseHostTarget";
-import { orgQueries } from "@app/lib/queries";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import type { ListSitesResponse } from "@server/routers/site";
 import { type ListTargetsResponse } from "@server/routers/target";
 import type { ArrayElement } from "@server/types/ArrayElement";
-import { useQuery } from "@tanstack/react-query";
-import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { ContainersSelector } from "./ContainersSelector";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -28,23 +25,21 @@ export type LocalTarget = Omit<
     "protocol"
 >;
 
-export type ResourceTargetAddressItemProps = {
+export type ResourceTargetSiteItemProps = {
     getDockerStateForSite: (siteId: number) => DockerState;
     updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
     orgId: string;
     proxyTarget: LocalTarget;
-    isHttp: boolean;
     refreshContainersForSite: (siteId: number) => void;
 };
 
-export function ResourceTargetAddressItem({
+export function ResourceTargetSiteItem({
     orgId,
     getDockerStateForSite,
     updateTarget,
     proxyTarget,
-    isHttp,
     refreshContainersForSite
-}: ResourceTargetAddressItemProps) {
+}: ResourceTargetSiteItemProps) {
     const t = useTranslations();
 
     const [selectedSite, setSelectedSite] = useState<Pick<
@@ -76,62 +71,78 @@ export function ResourceTargetAddressItem({
         });
     };
 
+    return (
+        <div
+            className="flex w-full min-w-0 items-center h-9 border border-input rounded-md"
+            key={proxyTarget.targetId}
+        >
+            {selectedSite && selectedSite.type === "newt" && (
+                <ContainersSelector
+                    site={selectedSite}
+                    containers={
+                        getDockerStateForSite(selectedSite.siteId).containers
+                    }
+                    isAvailable={
+                        getDockerStateForSite(selectedSite.siteId).isAvailable
+                    }
+                    onContainerSelect={handleContainerSelectForTarget}
+                    onRefresh={() =>
+                        refreshContainersForSite(selectedSite.siteId)
+                    }
+                />
+            )}
+
+            <Popover>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        role="combobox"
+                        className={cn(
+                            "h-9 min-w-0 flex-1 justify-between px-3 rounded-none hover:bg-transparent",
+                            !proxyTarget.siteId && "text-muted-foreground"
+                        )}
+                    >
+                        <span className="truncate">
+                            {proxyTarget.siteId
+                                ? selectedSite?.name
+                                : t("siteSelect")}
+                        </span>
+                        <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0">
+                    <SitesSelector
+                        orgId={orgId}
+                        selectedSite={selectedSite}
+                        onSelectSite={(site) => {
+                            updateTarget(proxyTarget.targetId, {
+                                siteId: site.siteId,
+                                siteType: site.type,
+                                siteName: site.name
+                            });
+                            setSelectedSite(site);
+                        }}
+                    />
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}
+
+export type ResourceTargetAddressItemProps = {
+    updateTarget: (targetId: number, data: Partial<LocalTarget>) => void;
+    proxyTarget: LocalTarget;
+    isHttp: boolean;
+};
+
+export function ResourceTargetAddressItem({
+    updateTarget,
+    proxyTarget,
+    isHttp
+}: ResourceTargetAddressItemProps) {
     return (
         <div className="flex items-center w-full" key={proxyTarget.targetId}>
             <div className="flex items-center w-full justify-start py-0 space-x-2 px-0 cursor-default border border-input rounded-md">
-                {selectedSite && selectedSite.type === "newt" && (
-                    <ContainersSelector
-                        site={selectedSite}
-                        containers={
-                            getDockerStateForSite(selectedSite.siteId)
-                                .containers
-                        }
-                        isAvailable={
-                            getDockerStateForSite(selectedSite.siteId)
-                                .isAvailable
-                        }
-                        onContainerSelect={handleContainerSelectForTarget}
-                        onRefresh={() =>
-                            refreshContainersForSite(selectedSite.siteId)
-                        }
-                    />
-                )}
-
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <Button
-                            variant="ghost"
-                            role="combobox"
-                            className={cn(
-                                "w-45 justify-between text-sm border-r pr-4 rounded-none h-8 hover:bg-transparent",
-                                "",
-                                !proxyTarget.siteId && "text-muted-foreground"
-                            )}
-                        >
-                            <span className="truncate max-w-37.5">
-                                {proxyTarget.siteId
-                                    ? selectedSite?.name
-                                    : t("siteSelect")}
-                            </span>
-                            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                        </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="p-0">
-                        <SitesSelector
-                            orgId={orgId}
-                            selectedSite={selectedSite}
-                            onSelectSite={(site) => {
-                                updateTarget(proxyTarget.targetId, {
-                                    siteId: site.siteId,
-                                    siteType: site.type,
-                                    siteName: site.name
-                                });
-                                setSelectedSite(site);
-                            }}
-                        />
-                    </PopoverContent>
-                </Popover>
-
                 {isHttp && (
                     <Select
                         defaultValue={proxyTarget.method ?? "http"}
@@ -142,7 +153,7 @@ export function ResourceTargetAddressItem({
                             })
                         }
                     >
-                        <SelectTrigger className="h-8 px-2 w-17.5 border-none bg-transparent shadow-none data-[state=open]:bg-transparent rounded-none">
+                        <SelectTrigger className="h-9 pl-2 w-17.5 border-none bg-transparent shadow-none data-[state=open]:bg-transparent rounded-none mr-0 pr-0">
                             {proxyTarget.method || "http"}
                         </SelectTrigger>
                         <SelectContent>
@@ -154,7 +165,7 @@ export function ResourceTargetAddressItem({
                 )}
 
                 {isHttp && (
-                    <div className="flex items-center justify-center px-2 h-9">
+                    <div className="flex items-center justify-center h-9 mr-0 pl-1">
                         {"://"}
                     </div>
                 )}
@@ -195,7 +206,7 @@ export function ResourceTargetAddressItem({
                         }
                     }}
                 />
-                <div className="flex items-center justify-center px-2 h-9">
+                <div className="flex items-center justify-center h-9 mr-0">
                     {":"}
                 </div>
                 <Input