Increase tab and details button hit area (#5992)

* Increase tab hit area

- Expand the clickable area using an invisible `::before pseudo-element` without affecting visuals.

* Increase Details button hit area

Author: sanne-san

assets/js/dashboard/components/tabs.tsx

@@ -59,7 +59,10 @@ export const TabButton = ({
     })}
   >
     <button
-      className={classNames('group/tab flex rounded-sm', className)}
+      className={classNames(
+        'group/tab relative flex rounded-sm before:absolute before:inset-[-16px_-6px] before:content-[" "]',
+        className
+      )}
       onClick={onClick}
     >
       <TabButtonText active={active}>{children}</TabButtonText>
@@ -92,7 +95,7 @@ export const DropdownTabButton = ({
             })}
           >
             <Popover.Button
-              className="group/tab inline-flex justify-between rounded-xs"
+              className="group/tab relative inline-flex justify-between rounded-xs before:absolute before:inset-[-16px_-6px] before:content-[' ']"
               ref={dropdownButtonRef}
             >
               <TabButtonText active={active}>{children}</TabButtonText>

assets/js/dashboard/stats/more-link.js

@@ -30,7 +30,7 @@ export default function MoreLink({ linkProps, state }) {
   }, [])
 
   const baseClassName =
-    'flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150'
+    'relative flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150 before:absolute before:inset-[-8px] before:content-[" "]'
   const icon = detailsIcon()
 
   if (state === MoreLinkState.HIDDEN) {