Skip to content

Commit 1260d17

Browse files
authored
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
1 parent f1b4391 commit 1260d17

File tree

2 files changed

+6
-3
lines changed

2 files changed

+6
-3
lines changed

assets/js/dashboard/components/tabs.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,10 @@ export const TabButton = ({
5959
})}
6060
>
6161
<button
62-
className={classNames('group/tab flex rounded-sm', className)}
62+
className={classNames(
63+
'group/tab relative flex rounded-sm before:absolute before:inset-[-16px_-6px] before:content-[" "]',
64+
className
65+
)}
6366
onClick={onClick}
6467
>
6568
<TabButtonText active={active}>{children}</TabButtonText>
@@ -92,7 +95,7 @@ export const DropdownTabButton = ({
9295
})}
9396
>
9497
<Popover.Button
95-
className="group/tab inline-flex justify-between rounded-xs"
98+
className="group/tab relative inline-flex justify-between rounded-xs before:absolute before:inset-[-16px_-6px] before:content-[' ']"
9699
ref={dropdownButtonRef}
97100
>
98101
<TabButtonText active={active}>{children}</TabButtonText>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function MoreLink({ linkProps, state }) {
3030
}, [])
3131

3232
const baseClassName =
33-
'flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150'
33+
'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-[" "]'
3434
const icon = detailsIcon()
3535

3636
if (state === MoreLinkState.HIDDEN) {

0 commit comments

Comments
 (0)