Commit 4fd83bad authored by Robert Knight's avatar Robert Knight

Fix tabs being detached from tab panel on touch devices

The `CloseButton` component in @hypothesis/frontend-shared has styling that
makes it taller (44px) on touch devices, but the `Tab` component does not. Items
in the `TabHeader` are centered on the cross axis, so on mobile, the close
button became taller than the tabs and detached them from the tab panel.

An alternative way to fix this would be to make tabs also grow in height on
touch devices, but they are quite usable without.

Fixes https://github.com/hypothesis/client/issues/6131
parent 35b84a43
...@@ -23,6 +23,12 @@ export default function TabHeader({ ...@@ -23,6 +23,12 @@ export default function TabHeader({
// font size // font size
'text-[16px]', 'text-[16px]',
'text-grey-6 hover:text-grey-7 hover:bg-grey-3/50', 'text-grey-6 hover:text-grey-7 hover:bg-grey-3/50',
// Keep the close button the same height on touch devices.
//
// This is needed so that the close button remains the same height as
// the `Tab` components rendered inside the `TabList`. See issue #6131.
'touch:!min-h-0',
)} )}
title="Close" title="Close"
variant="custom" variant="custom"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment