fix: vertical breakpoints on mobile

tidalcycles · Oct 14, 2024 · bb4b7dc · bb4b7dc
1 parent 8440fa4
commit bb4b7dc
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
@@ -46,15 +46,18 @@ 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 ">
           <Tabs setTab={setTab} tab={tab} pinned={pinned} />
           <PinButton pinned={pinned} setPinned={setPanelPinned} />
         </div>
 
-        <div className="overflow-auto">
+        <div className="overflow-auto h-full">
           <PanelContent context={context} tab={tab} />
         </div>
       </div>

diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
@@ -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) =>