From 37a35022f5df4471e55fcbbd45137695d364f906 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 18 Aug 2023 23:45:55 +0200
Subject: [PATCH] fix panel scroll + move to bottom when minimized

---
 website/src/repl/Footer.jsx | 6 +++---
 website/src/repl/Repl.jsx   | 2 +-
 website/src/settings.mjs    | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 1d8dedee..bfa46bd3 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -16,7 +16,7 @@ const TAURI = window.__TAURI__;
 export function Footer({ context }) {
   const footerContent = useRef();
   const [log, setLog] = useState([]);
-  const { activeFooter, isZen, panelPosition: position } = useSettings();
+  const{ activeFooter, isZen, panelPosition } = useSettings();
 
   useLayoutEffect(() => {
     if (footerContent.current && activeFooter === 'console') {
@@ -76,10 +76,10 @@ export function Footer({ context }) {
 
   let positions = {
     right: cx('max-w-full flex-grow-0 flex-none overflow-hidden', isActive ? 'w-[600px] h-full' : 'absolute right-0'),
-    bottom: 'h-[360px] min-h-[360px] relative',
+    bottom: cx('relative', isActive ? 'h-[360px] min-h-[360px]' : ''),
   };
   return (
-    <nav className={cx('bg-lineHighlight z-[1000] flex flex-col', positions[position])}>
+    <nav className={cx('bg-lineHighlight z-[1000] flex flex-col', positions[panelPosition])}>
       <div className="flex justify-between px-2">
         <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
           <FooterTab name="intro" label="welcome" />
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index aa83317d..71d8a98f 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -114,7 +114,7 @@ export function Repl({ embedded = false }) {
   const [view, setView] = useState(); // codemirror view
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
-  const {
+  let {
     theme,
     keybindings,
     fontSize,
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 2cbb1f5b..036c5509 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -28,6 +28,7 @@ export function useSettings() {
     isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
     isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
     fontSize: Number(state.fontSize),
+    panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom',
   };
 }