From 1d887e81ef033eb0dae8c20d3cfb6b69684df95a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:18:59 +0100
Subject: [PATCH 1/5] fix: h-full

---
 website/src/repl/components/ReplEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index fe2e00acd..9ddd50c7d 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -21,7 +21,7 @@ export default function ReplEditor(Props) {
       <div className="flex flex-col grow overflow-hidden">
         {/* <MainPanel context={context} isEmbedded={isEmbedded} className="hidden sm:block" /> */}
         <MainPanel context={context} isEmbedded={isEmbedded} />
-        <div className="flex overflow-hidden">
+        <div className="flex overflow-hidden h-full">
           <Code containerRef={containerRef} editorRef={editorRef} init={init} />
           {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
         </div>

From 107a3acd3a208207382142266700c1947fd7511e Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:24:04 +0100
Subject: [PATCH 2/5] rename panel components + fix borders

---
 website/src/components/Udels/UdelsEditor.jsx |  4 ++--
 website/src/repl/components/ReplEditor.jsx   |  6 +++---
 website/src/repl/components/panel/Panel.jsx  | 17 ++++++++---------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/website/src/components/Udels/UdelsEditor.jsx b/website/src/components/Udels/UdelsEditor.jsx
index f58ac5fc7..b89576351 100644
--- a/website/src/components/Udels/UdelsEditor.jsx
+++ b/website/src/components/Udels/UdelsEditor.jsx
@@ -1,5 +1,5 @@
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel } from '@src/repl/components/panel/Panel';
+import { BottomPanel } from '@src/repl/components/panel/Panel';
 import { Code } from '@src/repl/components/Code';
 import BigPlayButton from '@src/repl/components/BigPlayButton';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
@@ -20,7 +20,7 @@ export default function UdelsEditor(Props) {
         <Code containerRef={containerRef} editorRef={editorRef} init={init} />
       </div>
       <UserFacingErrorMessage error={error} />
-      <HorizontalPanel context={context} />
+      <BottomPanel context={context} />
     </div>
   );
 }
diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 9ddd50c7d..437475e61 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -1,6 +1,6 @@
 import { Code } from '@src/repl/components/Code';
 import Loader from '@src/repl/components/Loader';
-import { HorizontalPanel, MainPanel, VerticalPanel } from '@src/repl/components/panel/Panel';
+import { BottomPanel, MainPanel, RightPanel } from '@src/repl/components/panel/Panel';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { useSettings } from '@src/settings.mjs';
 
@@ -23,11 +23,11 @@ export default function ReplEditor(Props) {
         <MainPanel context={context} isEmbedded={isEmbedded} />
         <div className="flex overflow-hidden h-full">
           <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-          {!isZen && panelPosition === 'right' && <VerticalPanel context={context} />}
+          {!isZen && panelPosition === 'right' && <RightPanel context={context} />}
         </div>
       </div>
       <UserFacingErrorMessage error={error} />
-      {!isZen && panelPosition === 'bottom' && <HorizontalPanel context={context} />}
+      {!isZen && panelPosition === 'bottom' && <BottomPanel context={context} />}
       {/* <MainPanel context={context} isEmbedded={isEmbedded} className="block sm:hidden" /> */}
     </div>
   );
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index b34568d39..1c12ebc35 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -162,7 +162,7 @@ function PanelCloseButton() {
     isPanelOpen && (
       <button
         onClick={() => setIsPanelOpened(false)}
-        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50')}
+        className={cx('px-2 py-0 text-foreground hover:opacity-50')}
         aria-label="Close Menu"
       >
         <XMarkIcon className="w-6 h-6" />
@@ -171,7 +171,7 @@ function PanelCloseButton() {
   );
 }
 
-export function HorizontalPanel({ context }) {
+export function BottomPanel({ context }) {
   const { isPanelOpen, activeFooter: tab } = useSettings();
   return (
     <PanelNav
@@ -182,7 +182,7 @@ export function HorizontalPanel({ context }) {
     >
       <div className="flex justify-between min-h-10 max-h-10 grid-cols-2 items-center border-t border-muted">
         <PanelCloseButton />
-        <Tabs setTab={setTab} tab={tab} />
+        <Tabs setTab={setTab} tab={tab} className={cx(isPanelOpen && 'border-l border-muted')} />
       </div>
       {isPanelOpen && (
         <div className="w-full h-full overflow-auto border-t border-muted">
@@ -193,7 +193,7 @@ export function HorizontalPanel({ context }) {
   );
 }
 
-export function VerticalPanel({ context }) {
+export function RightPanel({ context }) {
   const settings = useSettings();
   const { activeFooter: tab, isPanelOpen } = settings;
   if (!isPanelOpen) {
@@ -203,8 +203,7 @@ export function VerticalPanel({ context }) {
     <PanelNav
       settings={settings}
       className={cx(
-        //'border-l border-muted shrink-0',
-        'border-0 border-muted shrink-0 h-full overflow-hidden',
+        'border-l border-muted shrink-0 h-full overflow-hidden',
         isPanelOpen
           ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]`
             `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]`
@@ -217,10 +216,10 @@ export function VerticalPanel({ context }) {
             <LogoButton context={context} />
           </div> */}
           <PanelCloseButton />
-          <Tabs setTab={setTab} tab={tab} />
+          <Tabs setTab={setTab} tab={tab} className="border-l border-muted" />
           {/* <PanelCloseButton /> */}
         </div>
-        <div className="overflow-auto h-full border-l border-muted">
+        <div className="overflow-auto h-full">
           <PanelContent context={context} tab={tab} />
         </div>
       </div>
@@ -301,7 +300,7 @@ function Tabs({ className }) {
   return (
     <div
       className={cx(
-        'px-2 border-l border-muted w-full flex select-none max-w-full h-10 max-h-10 min-h-10 overflow-auto items-center',
+        'px-2 w-full flex select-none max-w-full h-10 max-h-10 min-h-10 overflow-auto items-center',
         className,
       )}
     >

From 8e5ca57eddadba1f3781b81cca1604d351dec10d Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:29:03 +0100
Subject: [PATCH 3/5] cleanup + pending state

---
 website/src/repl/components/panel/Panel.jsx | 35 +++------------------
 1 file changed, 4 insertions(+), 31 deletions(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 1c12ebc35..f08860d3b 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -48,11 +48,9 @@ export function MainPanel({ context, isEmbedded = false, className }) {
     <nav
       id="header"
       className={cx(
-        //'border-t sm:border-b sm:border-t-0 border-muted',
         'border-b border-muted',
         'flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
-        // isZen ? 'h-12 w-8 fixed top-0 left-0' : 'h-10 sticky top-0 w-full justify-between',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
         'flex items-center',
         className,
@@ -60,8 +58,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
       style={{ fontFamily }}
     >
       <div className={cx('flex w-full justify-between')}>
-        {' '}
-        {/*flex-wrap*/}
         <div className="px-3 py-1 flex space-x-2 select-none">
           <h1
             onClick={() => {
@@ -77,11 +73,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
               <div className="space-x-2 flex items-baseline">
                 <span className="hidden sm:block">strudel</span>
                 <span className="text-sm font-medium hidden sm:block">REPL</span>
-                {/* !isEmbedded && isButtonRowHidden && (
-                  <a href={`${baseNoTrailing}/learn`} className="text-sm opacity-25 font-medium">
-                    DOCS
-                  </a>
-                ) */}
               </div>
             )}
           </h1>
@@ -89,7 +80,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
         {!isZen && (
           <div className="flex grow justify-end">
             {!isButtonRowHidden && <MainMenu isEmbedded={isEmbedded} context={context} />}
-            {/* className="hidden sm:flex" */}
             <PanelToggle isEmbedded={isEmbedded} isZen={isZen} />
           </div>
         )}
@@ -101,7 +91,6 @@ export function MainPanel({ context, isEmbedded = false, className }) {
 export function Footer({ context, isEmbedded = false }) {
   return (
     <div className="border-t border-muted bg-lineHighlight block lg:hidden">
-      {/* block lg:hidden */}
       <MainMenu context={context} isEmbedded={isEmbedded} />
     </div>
   );
@@ -117,15 +106,10 @@ function MainMenu({ context, isEmbedded = false, className }) {
         title={started ? 'stop' : 'play'}
         className={cx('px-2 hover:opacity-50', !started && !isCSSAnimationDisabled && 'animate-pulse')}
       >
-        {/* {!pending ? ( */}
         <span className={cx('flex items-center space-x-2')}>
-          {/* {started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />} */}
           {started ? <StopIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
-          {!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
+          {!isEmbedded && <span>{pending ? '...' : started ? 'stop' : 'play'}</span>}
         </span>
-        {/* ) : (
-          <>loading...</>
-        )} */}
       </button>
       <button
         onClick={handleEvaluate}
@@ -204,20 +188,13 @@ export function RightPanel({ context }) {
       settings={settings}
       className={cx(
         'border-l border-muted shrink-0 h-full overflow-hidden',
-        isPanelOpen
-          ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]`
-            `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]`
-          : 'min-w-12 max-w-12',
+        isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12',
       )}
     >
       <div className={cx('flex flex-col h-full')}>
         <div className="flex justify-between w-full overflow-hidden border-b border-muted min-h-10 max-h-10">
-          {/* <div className="block sm:hidden text-foreground px-3 py-2 border-l border-muted">
-            <LogoButton context={context} />
-          </div> */}
           <PanelCloseButton />
           <Tabs setTab={setTab} tab={tab} className="border-l border-muted" />
-          {/* <PanelCloseButton /> */}
         </div>
         <div className="overflow-auto h-full">
           <PanelContent context={context} tab={tab} />
@@ -319,14 +296,10 @@ export function PanelToggle({ isEmbedded, isZen }) {
     !isZen &&
     panelPosition === 'right' && (
       <button
-        title="share"
-        className={cx(
-          'border-l border-muted px-2 py-0 text-foreground hover:opacity-50' /* , isPanelOpen && 'hidden' */,
-        )}
+        title="menu"
+        className={cx('border-l border-muted px-2 py-0 text-foreground hover:opacity-50')}
         onClick={() => setIsPanelOpened(!isPanelOpen)}
       >
-        {/* <span>menu</span> */}
-        {/* isPanelOpen ? <XMarkIcon className="w-6 h-6" /> : <Bars3Icon className="w-6 h-6" /> */}
         <Bars3Icon className="w-6 h-6" />
       </button>
     )

From 4993ec4cbf1bdb2f9fa19c23207686b232f6fecb Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 20:40:35 +0100
Subject: [PATCH 4/5] fix: console scroll to bottom on change + more logs +
 dont wrap

---
 website/src/repl/components/panel/ConsoleTab.jsx | 13 +++++++++++--
 website/src/repl/components/useLogger.jsx        |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/website/src/repl/components/panel/ConsoleTab.jsx b/website/src/repl/components/panel/ConsoleTab.jsx
index 64981937f..54a8ff549 100644
--- a/website/src/repl/components/panel/ConsoleTab.jsx
+++ b/website/src/repl/components/panel/ConsoleTab.jsx
@@ -2,13 +2,21 @@ import cx from '@src/cx.mjs';
 import { useSettings } from '../../../settings.mjs';
 import { useStore } from '@nanostores/react';
 import { $strudel_log_history } from '../useLogger';
+import { useEffect, useRef } from 'react';
 
 export function ConsoleTab() {
   const log = useStore($strudel_log_history);
   const { fontFamily } = useSettings();
+  const scrollRef = useRef();
+  // scroll to bottom when log changes
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [log]);
   return (
     <div id="console-tab" className="break-all w-full h-full" style={{ fontFamily }}>
-      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md">
+      <div className="h-full w-full overflow-auto space-y-1 p-2 rounded-md" ref={scrollRef}>
         {' '}
         {/* bg-background */}
         {log.map((l, i) => {
@@ -18,12 +26,13 @@ export function ConsoleTab() {
             <div
               key={l.id}
               className={cx(
+                'whitespace-nowrap',
                 l.type === 'error' ? 'text-background bg-foreground' : 'text-foreground',
                 l.type === 'highlight' && 'underline',
               )}
               style={color ? { color } : {}}
             >
-              <span dangerouslySetInnerHTML={{ __html: message }} />
+              <span dangerouslySetInnerHTML={{ __html: message }} className="whitespace-nowrap" />
               {l.count ? ` (${l.count})` : ''}
             </div>
           );
diff --git a/website/src/repl/components/useLogger.jsx b/website/src/repl/components/useLogger.jsx
index fdd56606d..4a87ac075 100644
--- a/website/src/repl/components/useLogger.jsx
+++ b/website/src/repl/components/useLogger.jsx
@@ -21,7 +21,7 @@ function getUpdatedLog(log, event) {
   } else {
     log = log.concat([{ message, type, id, data }]);
   }
-  return log.slice(-20);
+  return log.slice(-40);
 }
 
 export function useLogger() {

From f99b13efc27727dace0e1bcb690543cceae5ae00 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 22 Jan 2026 21:46:48 +0100
Subject: [PATCH 5/5] fix: zen mode lost border

---
 website/src/repl/components/panel/Panel.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index f08860d3b..3b4dd5482 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -48,9 +48,8 @@ export function MainPanel({ context, isEmbedded = false, className }) {
     <nav
       id="header"
       className={cx(
-        'border-b border-muted',
         'flex-none text-black z-[100] text-sm select-none min-h-10 max-h-10',
-        !isZen && !isEmbedded && 'bg-lineHighlight',
+        !isZen && !isEmbedded && 'border-b border-muted bg-lineHighlight',
         isZen ? 'h-12 w-8 fixed top-0 left-0' : '',
         'flex items-center',
         className,