From d0496638b38f3f83695112771daae5f5c994f181 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 28 Feb 2025 00:15:20 -0600
Subject: [PATCH] Fix admin menu hit target

---
 src/admin/AdminAppMenu.tsx            | 15 ++++++++++++---
 src/admin/upload/AdminUploadPanel.tsx |  2 +-
 src/app/ViewSwitcher.tsx              | 12 ++----------
 src/components/more/MoreMenu.tsx      |  3 +++
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx
index 423b3860..ba862b45 100644
--- a/src/admin/AdminAppMenu.tsx
+++ b/src/admin/AdminAppMenu.tsx
@@ -23,11 +23,11 @@ import { FaRegFolderOpen } from 'react-icons/fa';
 import { FiUploadCloud } from 'react-icons/fi';
 
 export default function AdminAppMenu({
+  active,
   className,
-  buttonClassName,
 }: {
+  active?: boolean
   className?: string
-  buttonClassName?: string
 }) {
   const {
     photosCount,
@@ -126,15 +126,24 @@ export default function AdminAppMenu({
       header="Admin menu"
       icon={<BiLockAlt size={16} className="translate-y-[-0.5px]" />}
       align="start"
+      sideOffset={12}
+      alignOffset={-85}
       onOpen={refreshAdminData}
       className={clsx(
         'border-medium',
         className,
       )}
       buttonClassName={clsx(
+        'w-full h-full',
+        'flex items-center justify-center',
+        'hover:bg-transparent dark:hover:bg-transparent',
+        'active:bg-transparent dark:active:bg-transparent',
         'rounded-none focus:outline-none',
-        buttonClassName,
+        active
+          ? 'text-black dark:text-white'
+          : 'text-gray-400 dark:text-gray-600',
       )}
+      buttonClassNameOpen="bg-dim"
       items={items}
       ariaLabel="Admin Menu"
     />
diff --git a/src/admin/upload/AdminUploadPanel.tsx b/src/admin/upload/AdminUploadPanel.tsx
index 7be0a887..89190cad 100644
--- a/src/admin/upload/AdminUploadPanel.tsx
+++ b/src/admin/upload/AdminUploadPanel.tsx
@@ -5,7 +5,7 @@ import LoaderButton from '@/components/primitives/LoaderButton';
 import SiteGrid from '@/components/SiteGrid';
 import PhotoUploadWithStatus from '@/photo/PhotoUploadWithStatus';
 import { useAppState } from '@/state/AppState';
-import clsx from 'clsx';
+import clsx from 'clsx/lite';
 import { IoCloseSharp } from 'react-icons/io5';
 
 export default function AdminUploadPanel({
diff --git a/src/app/ViewSwitcher.tsx b/src/app/ViewSwitcher.tsx
index d0cf9222..418db0ba 100644
--- a/src/app/ViewSwitcher.tsx
+++ b/src/app/ViewSwitcher.tsx
@@ -10,7 +10,6 @@ import IconSearch from './IconSearch';
 import { useAppState } from '@/state/AppState';
 import { GRID_HOMEPAGE_ENABLED } from './config';
 import AdminAppMenu from '@/admin/AdminAppMenu';
-import { clsx } from 'clsx/lite';
 import Spinner from '@/components/Spinner';
 
 export type SwitcherSelection = 'feed' | 'grid' | 'admin';
@@ -56,16 +55,9 @@ export default function ViewSwitcher({
           />}
         {isUserSignedIn &&
           <SwitcherItem
+            className="p-0!"
             icon={<AdminAppMenu
-              className="mt-3 ml-[-94px]"
-              buttonClassName={clsx(
-                'bg-transparent dark:bg-transparent',
-                'hover:bg-transparent dark:hover:bg-transparent',
-                'active:bg-transparent dark:active:bg-transparent',
-                currentSelection === 'admin'
-                  ? 'text-black dark:text-white'
-                  : 'text-gray-400 dark:text-gray-600',
-              )}
+              active={currentSelection === 'admin'}
             />}
             noPadding
           />}
diff --git a/src/components/more/MoreMenu.tsx b/src/components/more/MoreMenu.tsx
index a7fe80c7..6e60d699 100644
--- a/src/components/more/MoreMenu.tsx
+++ b/src/components/more/MoreMenu.tsx
@@ -16,6 +16,7 @@ export default function MoreMenu({
   header,
   className,
   buttonClassName,
+  buttonClassNameOpen,
   ariaLabel,
   align = 'end',
   onOpen,
@@ -26,6 +27,7 @@ export default function MoreMenu({
   header?: ReactNode
   className?: string
   buttonClassName?: string
+  buttonClassNameOpen?: string
   ariaLabel: string
   onOpen?: () => void
 } & ComponentProps<typeof DropdownMenu.Content>){
@@ -49,6 +51,7 @@ export default function MoreMenu({
             'dark:hover:bg-gray-800/75 dark:active:bg-gray-900',
             'text-dim',
             buttonClassName,
+            isOpen && buttonClassNameOpen,
           )}
           aria-label={ariaLabel}
         >