From 10f143749625dc06786e6e3a4137a612b6054b35 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Mon, 15 Dec 2025 21:23:40 -0500
Subject: [PATCH] Small visual adjustments

---
 .../CreateInternalResourceDialog.tsx          | 26 ++++++---------
 src/components/EditInternalResourceDialog.tsx | 33 +++++++------------
 src/components/tags/autocomplete.tsx          |  2 +-
 3 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/CreateInternalResourceDialog.tsx b/src/components/CreateInternalResourceDialog.tsx
index 6aad4123..adbb7f61 100644
--- a/src/components/CreateInternalResourceDialog.tsx
+++ b/src/components/CreateInternalResourceDialog.tsx
@@ -48,9 +48,7 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
 import { orgQueries } from "@app/lib/queries";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ListClientsResponse } from "@server/routers/client/listClients";
 import { ListSitesResponse } from "@server/routers/site";
-import { ListUsersResponse } from "@server/routers/user";
 import { UserType } from "@server/types/UserTypes";
 import { useQuery } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
@@ -59,7 +57,7 @@ import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { InfoPopup } from "@app/components/ui/info-popup";
+// import { InfoPopup } from "@app/components/ui/info-popup";
 
 // Helper to validate port range string format
 const isValidPortRangeString = (val: string | undefined | null): boolean => {
@@ -838,7 +836,7 @@ export default function CreateInternalResourceDialog({
                                 <h3 className="text-lg font-semibold mb-4">
                                     {t("portRestrictions")}
                                 </h3>
-                                <div className="space-y-4">
+                                <div className="space-y-3">
                                     {/* TCP Ports */}
                                     <FormField
                                         control={form.control}
@@ -846,21 +844,19 @@ export default function CreateInternalResourceDialog({
                                         render={({ field }) => (
                                             <FormItem>
                                                 <div className="flex items-center gap-2">
-                                                    <FormLabel className="min-w-[50px]">
+                                                    <FormLabel className="min-w-10">
                                                         TCP
                                                     </FormLabel>
-                                                    <InfoPopup
+                                                    {/*<InfoPopup
                                                         info={t("tcpPortsDescription")}
-                                                    />
-                                                </div>
-                                                <div className="flex items-center gap-2">
+                                                    />*/}
                                                     <Select
                                                         value={tcpPortMode}
                                                         onValueChange={(value: PortMode) => {
                                                             setTcpPortMode(value);
                                                         }}
                                                     >
-                                                        <SelectTrigger className="w-[120px]">
+                                                        <SelectTrigger className="w-[110px]">
                                                             <SelectValue />
                                                         </SelectTrigger>
                                                         <SelectContent>
@@ -910,21 +906,19 @@ export default function CreateInternalResourceDialog({
                                         render={({ field }) => (
                                             <FormItem>
                                                 <div className="flex items-center gap-2">
-                                                    <FormLabel className="min-w-[50px]">
+                                                    <FormLabel className="min-w-10">
                                                         UDP
                                                     </FormLabel>
-                                                    <InfoPopup
+                                                    {/*<InfoPopup
                                                         info={t("udpPortsDescription")}
-                                                    />
-                                                </div>
-                                                <div className="flex items-center gap-2">
+                                                    />*/}
                                                     <Select
                                                         value={udpPortMode}
                                                         onValueChange={(value: PortMode) => {
                                                             setUdpPortMode(value);
                                                         }}
                                                     >
-                                                        <SelectTrigger className="w-[120px]">
+                                                        <SelectTrigger className="w-[110px]">
                                                             <SelectValue />
                                                         </SelectTrigger>
                                                         <SelectContent>
diff --git a/src/components/EditInternalResourceDialog.tsx b/src/components/EditInternalResourceDialog.tsx
index cfa60463..b5c378f1 100644
--- a/src/components/EditInternalResourceDialog.tsx
+++ b/src/components/EditInternalResourceDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import {
@@ -36,18 +36,11 @@ import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { ListRolesResponse } from "@server/routers/role";
-import { ListUsersResponse } from "@server/routers/user";
-import { ListSiteResourceRolesResponse } from "@server/routers/siteResource/listSiteResourceRoles";
-import { ListSiteResourceUsersResponse } from "@server/routers/siteResource/listSiteResourceUsers";
-import { ListSiteResourceClientsResponse } from "@server/routers/siteResource/listSiteResourceClients";
-import { ListClientsResponse } from "@server/routers/client/listClients";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
-import { AxiosResponse } from "axios";
 import { UserType } from "@server/types/UserTypes";
 import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { orgQueries, resourceQueries } from "@app/lib/queries";
-import { InfoPopup } from "@app/components/ui/info-popup";
+// import { InfoPopup } from "@app/components/ui/info-popup";
 
 // Helper to validate port range string format
 const isValidPortRangeString = (val: string | undefined | null): boolean => {
@@ -822,7 +815,7 @@ export default function EditInternalResourceDialog({
                                 <h3 className="text-lg font-semibold mb-4">
                                     {t("portRestrictions")}
                                 </h3>
-                                <div className="space-y-4">
+                                <div className="space-y-3">
                                     {/* TCP Ports */}
                                     <FormField
                                         control={form.control}
@@ -830,21 +823,19 @@ export default function EditInternalResourceDialog({
                                         render={({ field }) => (
                                             <FormItem>
                                                 <div className="flex items-center gap-2">
-                                                    <FormLabel className="min-w-[50px]">
+                                                    <FormLabel className="min-w-10">
                                                         TCP
                                                     </FormLabel>
-                                                    <InfoPopup
+                                                    {/*<InfoPopup
                                                         info={t("tcpPortsDescription")}
-                                                    />
-                                                </div>
-                                                <div className="flex items-center gap-2">
+                                                    />*/}
                                                     <Select
                                                         value={tcpPortMode}
                                                         onValueChange={(value: PortMode) => {
                                                             setTcpPortMode(value);
                                                         }}
                                                     >
-                                                        <SelectTrigger className="w-[120px]">
+                                                        <SelectTrigger className="w-[110px]">
                                                             <SelectValue />
                                                         </SelectTrigger>
                                                         <SelectContent>
@@ -894,21 +885,19 @@ export default function EditInternalResourceDialog({
                                         render={({ field }) => (
                                             <FormItem>
                                                 <div className="flex items-center gap-2">
-                                                    <FormLabel className="min-w-[50px]">
+                                                    <FormLabel className="min-w-10">
                                                         UDP
                                                     </FormLabel>
-                                                    <InfoPopup
+                                                    {/*<InfoPopup
                                                         info={t("udpPortsDescription")}
-                                                    />
-                                                </div>
-                                                <div className="flex items-center gap-2">
+                                                    />*/}
                                                     <Select
                                                         value={udpPortMode}
                                                         onValueChange={(value: PortMode) => {
                                                             setUdpPortMode(value);
                                                         }}
                                                     >
-                                                        <SelectTrigger className="w-[120px]">
+                                                        <SelectTrigger className="w-[110px]">
                                                             <SelectValue />
                                                         </SelectTrigger>
                                                         <SelectContent>
diff --git a/src/components/tags/autocomplete.tsx b/src/components/tags/autocomplete.tsx
index 3230f11b..ee865eb6 100644
--- a/src/components/tags/autocomplete.tsx
+++ b/src/components/tags/autocomplete.tsx
@@ -308,7 +308,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                                             role="option"
                                             aria-selected={isSelected}
                                             className={cn(
-                                                "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
+                                                "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-accent",
                                                 isSelected &&
                                                     "bg-accent text-accent-foreground",
                                                 classStyleProps?.commandItem