Refine app switcher layout/tooltip behavior

src/app/AppViewSwitcher.tsx

@@ -33,7 +33,7 @@ export default function AppViewSwitcher({
 
   const renderItemFeed =
     <SwitcherItem
-      icon={<IconFeed includeTitle={false} />}
+      icon={<IconFeed includeTitle={false} className="translate-x-[-0.5px]" />}
       href={PATH_FEED_INFERRED}
       active={currentSelection === 'feed'}
       tooltip={!isAdminMenuOpen
@@ -47,7 +47,7 @@ export default function AppViewSwitcher({
 
   const renderItemGrid =
     <SwitcherItem
-      icon={<IconGrid includeTitle={false} />}
+      icon={<IconGrid includeTitle={false} className="translate-x-[-0.5px]" />}
       href={PATH_GRID_INFERRED}
       active={currentSelection === 'grid'}
       tooltip={!isAdminMenuOpen
@@ -91,7 +91,6 @@ export default function AppViewSwitcher({
       </Switcher>
       <Switcher type="borderless">
         <SwitcherItem
-          title="Search"
           icon={<IconSearch includeTitle={false} />}
           onClick={() => setIsCommandKOpen?.(true)}
           tooltip={!isAdminMenuOpen

src/components/SwitcherItem.tsx

@@ -5,6 +5,8 @@ import Spinner from './Spinner';
 import LinkWithIconLoader from './LinkWithIconLoader';
 import Tooltip from './Tooltip';
 
+const WIDTH_CLASS = 'w-[42px]';
+
 export default function SwitcherItem({
   icon,
   title,
@@ -30,7 +32,7 @@ export default function SwitcherItem({
 }) {
   const className = clsx(
     'flex items-center justify-center',
-    'w-[42px] h-[28px]',
+    `${WIDTH_CLASS} h-[28px]`,
     isInteractive && 'cursor-pointer',
     isInteractive && 'hover:bg-gray-100/60 active:bg-gray-100',
     isInteractive && 'dark:hover:bg-gray-900/75 dark:active:bg-gray-900',
@@ -69,6 +71,7 @@ export default function SwitcherItem({
     tooltip
       ? <Tooltip
         {...tooltip}
+        classNameTrigger={WIDTH_CLASS}
         delayDuration={500}
       >
         {content}

src/components/icons/IconFeed.tsx

@@ -6,9 +6,11 @@ const INTRINSIC_HEIGHT = 24;
 export default function IconFeed({
   width = INTRINSIC_WIDTH,
   includeTitle = true,
+  className,
 }: {
   width?: number
   includeTitle?: boolean
+  className?: string
 }) {
   return (
     <svg
@@ -18,6 +20,7 @@ export default function IconFeed({
       fill="none"
       stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       {includeTitle && <title>Full Frame</title>}
       <rect x="5.625" y="6.625" width="16.75" height="10.75" rx="1" strokeWidth="1.25"/>

src/components/icons/IconGrid.tsx

@@ -6,9 +6,11 @@ const INTRINSIC_HEIGHT = 24;
 export default function IconGrid({
   width = INTRINSIC_WIDTH,
   includeTitle = true,
+  className,
 }: {
   width?: number
   includeTitle?: boolean
+  className?: string
 }) {
   return (
     <svg
@@ -18,6 +20,7 @@ export default function IconGrid({
       fill="none"
       stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       {includeTitle && <title>Grid</title>}
       <rect x="5.625" y="6.625" width="16.75" height="10.75" rx="1" strokeWidth="1.25"/>