fix: vertical breakpoints on mobile

This commit is contained in:
Jade (Rose) Rowland 2024-10-14 15:01:05 -04:00
parent 8440fa42ea
commit bb4b7dc533
2 changed files with 7 additions and 4 deletions

View File

@ -46,7 +46,10 @@ export function VerticalPanel({ context }) {
<PanelNav
onMouseEnter={(x) => setIsHovered(true)}
onMouseLeave={(x) => setIsHovered(false)}
className={cx('hover:w-[600px]', pinned ? `w-[600px]` : 'w-8')}
className={cx(
'lg:hover:min-w-[600px] lg:hover:max-w-[600px] hover:min-w-[300px] hover:max-w-[300px] ',
pinned ? `lg:min-w-[600px] min-w-[300px] lg:max-w-[600px] min-max-[300px]` : 'min-w-8',
)}
>
<div className={cx('group-hover:flex flex-col h-full', pinned ? 'flex' : 'hidden')}>
<div className="flex justify-between w-full ">
@ -54,7 +57,7 @@ export function VerticalPanel({ context }) {
<PinButton pinned={pinned} setPinned={setPanelPinned} />
</div>
<div className="overflow-auto">
<div className="overflow-auto h-full">
<PanelContent context={context} tab={tab} />
</div>
</div>

View File

@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
const autoResetPatternOnChange = !isUdels();
return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-2 flex flex-col overflow-hidden max-h-full">
<div className="px-4 w-full dark:text-white text-stone-900 space-y-2 flex flex-col overflow-hidden max-h-full h-full">
<ButtonGroup
value={patternFilter}
onChange={(value) => settingsMap.setKey('patternFilter', value)}
@ -155,7 +155,7 @@ export function PatternsTab({ context }) {
</div>
)}
<section className="flex overflow-y-scroll max-h-full flex-col">
<section className="flex overflow-y-auto max-h-full flex-grow flex-col">
{patternFilter === patternFilterName.user && (
<PatternButtons
onClick={(id) =>