From 4f14ff00d5a739df1099eef674050ff51503fabf Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Jan 2026 22:29:16 +0100
Subject: [PATCH] responsiveness

---
 website/src/repl/components/Header.jsx      | 10 +++++-----
 website/src/repl/components/panel/Panel.jsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx
index 21d05c0e9..7a4259bf0 100644
--- a/website/src/repl/components/Header.jsx
+++ b/website/src/repl/components/Header.jsx
@@ -19,14 +19,14 @@ export function Header({ context, embedded = false }) {
     <header
       id="header"
       className={cx(
-        'flex-none text-black  z-[100] text-lg select-none h-10',
+        'flex-none text-black  z-[100] text-sm select-none min-h-10',
         !isZen && !isEmbedded && 'bg-lineHighlight',
-        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full py-1 justify-between',
-        isEmbedded ? 'flex' : 'md:flex',
+        isZen ? 'h-12 w-8 fixed top-0 left-0' : 'sticky top-0 w-full justify-between',
+        isEmbedded ? 'flex' : 'sm:flex',
       )}
       style={{ fontFamily }}
     >
-      <div className="px-4 flex space-x-2 md:pt-0 select-none">
+      <div className="px-4 pt-1 flex space-x-2 md:pt-0 select-none">
         <h1
           onClick={() => {
             if (isEmbedded) window.open(window.location.href.replace('embed', ''));
@@ -67,7 +67,7 @@ export function Header({ context, embedded = false }) {
         </h1>
       </div>
       {!isZen && !isButtonRowHidden && (
-        <div className="flex max-w-full overflow-auto text-foreground px-2">
+        <div className="flex max-w-full overflow-auto text-foreground px-2 h-10 justify-end">
           <button
             onClick={handleTogglePlay}
             title={started ? 'stop' : 'play'}
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index 50fb07f55..652d11985 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -48,7 +48,7 @@ export function VerticalPanel({ context }) {
   return (
     <PanelNav
       settings={settings}
-      className={cx(isPanelOpen ? `min-w-[min(600px,80vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12')}
+      className={cx(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 ">