From 14618ec41fef7865a8a43ec4494a349efd2c0883 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 9 Aug 2024 15:14:47 +0800
Subject: [PATCH] [dashboard] fix: auth policies button (#28499)

* Update GridHeaderActions.tsx

* Update GridHeaderActions.tsx
---
 .../TableGridEditor/GridHeaderActions.tsx        | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index 2b229ab8988..f03305771bd 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -21,7 +21,7 @@ import useEntityType from 'hooks/misc/useEntityType'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { TableLike } from 'hooks/misc/useTable'
 import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
-import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui'
+import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_, cn } from 'ui'
 import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { RoleImpersonationPopover } from '../RoleImpersonationSelector'
@@ -228,9 +228,17 @@ const GridHeaderActions = ({ table }: GridHeaderActionsProps) => {
                   className="group"
                   icon={
                     isLocked || policies.length > 0 ? (
-                      <span className="text-right text-xs rounded-xl px-[6px] bg-foreground-lighter/30 text-brand-1100">
-                        {policies.length}
-                      </span>
+                      <div
+                        className={cn(
+                          'flex items-center justify-center rounded-full bg-border-stronger h-[16px]',
+                          policies.length > 9 ? ' px-1' : 'w-[16px]',
+                          ''
+                        )}
+                      >
+                        <span className="text-[11px] text-foreground font-mono text-center">
+                          {policies.length}
+                        </span>
+                      </div>
                     ) : (
                       <PlusCircle strokeWidth={1.5} />
                     )