From bb4b7dc53337dcbbccd927824aaffb923dec3425 Mon Sep 17 00:00:00 2001
From: "Jade (Rose) Rowland" <jaderowlanddev@gmail.com>
Date: Mon, 14 Oct 2024 15:01:05 -0400
Subject: [PATCH] fix: vertical breakpoints on mobile

---
 website/src/repl/components/panel/Panel.jsx       | 7 +++++--
 website/src/repl/components/panel/PatternsTab.jsx | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 681394b7e..88a960f95 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -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>
diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index 31a82d963..df6075eb3 100644
--- 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) =>