From 3d22914df2ec8a8eca1a286e78e0cfe7e30dd815 Mon Sep 17 00:00:00 2001
From: kemal <hello@kemal.earth>
Date: Mon, 4 Aug 2025 11:20:02 +0100
Subject: [PATCH] style: some token permissions ui clean up

Cleans up token permissions part of the form and fixes the functionality of the popover search
---
 .../Account/AccessTokens/NewTokenBanner.tsx      |  1 +
 .../AccessTokens/TokenPermissionsForm.tsx        | 16 +++++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/studio/components/interfaces/Account/AccessTokens/NewTokenBanner.tsx b/apps/studio/components/interfaces/Account/AccessTokens/NewTokenBanner.tsx
index 3ca74183cb2..99953313a70 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/NewTokenBanner.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/NewTokenBanner.tsx
@@ -12,6 +12,7 @@ const NewTokenBanner = ({ token }: NewTokenBannerProps) => {
     <Admonition
       type="default"
       title="Successfully generated a new token!"
+      className="mb-6"
       description={
         <>
           <div className="w-full space-y-2">
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/TokenPermissionsForm.tsx b/apps/studio/components/interfaces/Account/AccessTokens/TokenPermissionsForm.tsx
index e50923743ef..9ce0814f521 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/TokenPermissionsForm.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/TokenPermissionsForm.tsx
@@ -59,7 +59,7 @@ export const TokenPermissionsForm = ({
                     <CommandEmpty_Shadcn_>No resources found.</CommandEmpty_Shadcn_>
 
                     {/* Preset Options */}
-                    <CommandGroup_Shadcn_ heading="Preset options">
+                    <CommandGroup_Shadcn_ heading="Preset options" className="[&>div]:text-left">
                       <CommandItem_Shadcn_
                         value="add-all-permissions"
                         onSelect={() => {
@@ -141,11 +141,11 @@ export const TokenPermissionsForm = ({
                       </CommandItem_Shadcn_>
                     </CommandGroup_Shadcn_>
 
-                    <CommandGroup_Shadcn_ heading="Individual permissions">
+                    <CommandGroup_Shadcn_ heading="Individual permissions" className="[&>div]:text-left">
                       {ALL_RESOURCES.map((resource) => (
                         <CommandItem_Shadcn_
                           key={resource.resource}
-                          value={resource.resource}
+                          value={`${resource.resource} ${resource.title} ${resource.group}`}
                           onSelect={() => {
                             const newRows = [
                               ...permissionRows,
@@ -154,6 +154,7 @@ export const TokenPermissionsForm = ({
                             setValue('permissionRows', newRows)
                             setResourceSearchOpen(false)
                           }}
+                          className="text-white"
                         >
                           <div className="flex items-center gap-3">
                             <Key size={12} />
@@ -190,7 +191,7 @@ export const TokenPermissionsForm = ({
                     <CommandEmpty_Shadcn_>No resources found.</CommandEmpty_Shadcn_>
 
                     {/* Preset Options */}
-                    <CommandGroup_Shadcn_ heading="Preset options">
+                    <CommandGroup_Shadcn_ heading="Preset options" className="[&>div]:text-left">
                       <CommandItem_Shadcn_
                         value="add-all-permissions"
                         onSelect={() => {
@@ -272,11 +273,11 @@ export const TokenPermissionsForm = ({
                       </CommandItem_Shadcn_>
                     </CommandGroup_Shadcn_>
 
-                    <CommandGroup_Shadcn_ heading="Individual permissions">
+                    <CommandGroup_Shadcn_ heading="Individual permissions" className="[&>div]:text-left">
                       {ALL_RESOURCES.map((resource) => (
                         <CommandItem_Shadcn_
                           key={resource.resource}
-                          value={resource.resource}
+                          value={`${resource.resource} ${resource.title} ${resource.group}`}
                           onSelect={() => {
                             const newRows = [
                               ...permissionRows,
@@ -285,6 +286,7 @@ export const TokenPermissionsForm = ({
                             setValue('permissionRows', newRows)
                             setResourceSearchOpen(false)
                           }}
+                          className="text-white"
                         >
                           <div className="flex items-center gap-3">
                             <Key size={12} />
@@ -313,7 +315,7 @@ export const TokenPermissionsForm = ({
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
                         <div className="flex flex-col">
-                          <span className="text-sm font-medium truncate max-w-[24ch]">
+                          <span className="text-sm font-medium truncate max-w-[36ch]">
                             {selectedResource?.title}
                           </span>
                           <span className="text-xs text-foreground-light">