From aa91c708c1d5cca8bce450c6490228cb6d8db6a6 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 27 Feb 2026 16:13:41 +0000 Subject: [PATCH] Make demo page mobile compatible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add viewport meta tag so mobile browsers render at device width - Change excalidraw-wrapper height from fixed 800px to 100vh for full-screen fit - Default slider and editor panels to hidden on mobile (≤768px) so the canvas is unobstructed on first load - Reduce textarea rows from 10 to 5 on mobile and remove fixed cols="80" to prevent horizontal overflow - Add responsive CSS: full-width textarea, rail repositioned as a top panel on mobile, buttons flex-wrap, layout toggle pinned to top-left corner https://claude.ai/code/session_01PaRVZmjTGUyhcjwKcbULzX --- index.html | 1 + src/index.js | 7 ++++--- src/styles.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 14a079d..ccee9a8 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Visual JavaScript + { height: undefined }); const [edits, setEdits] = React.useState([]); + const isMobile = window.innerWidth <= 768; const [layout, setLayout] = React.useState({ - slider: true, - editor: true, + slider: !isMobile, + editor: !isMobile, }); const [source, setSource] = React.useState(manager.getSource()); @@ -108,7 +109,7 @@ const App = () => { { className: "ui form" }, React.createElement( "textarea", - { className: "", ref: sourceText, defaultValue: source, cols: "80", rows: "10" }, + { className: "", ref: sourceText, defaultValue: source, rows: isMobile ? "5" : "10" }, ) ), diff --git a/src/styles.css b/src/styles.css index 75e77c6..d4ac7c7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -9,6 +9,12 @@ z-index: 9; padding: 20px; background: white; + box-sizing: border-box; +} +.source-code textarea { + width: 100%; + box-sizing: border-box; + resize: vertical; } .layout { position: fixed; @@ -43,7 +49,7 @@ } .excalidraw-wrapper { - height: 800px; + height: 100vh; position: relative; } @@ -53,3 +59,42 @@ .zen-mode-transition.App-menu_bottom--transition-left { transform: none; } + +/* ── Mobile styles ──────────────────────────────────────────────── */ +@media (max-width: 768px) { + /* Layout toggle buttons: pin to top-left corner */ + .layout { + left: 8px; + margin-left: 0; + top: 8px; + background: rgba(255, 255, 255, 0.92); + border-radius: 6px; + padding: 4px; + } + + /* Source-code panel: tighter padding, fewer rows handled via JS */ + .source-code { + padding: 10px; + } + + /* Right rail → full-width panel pinned to the top on mobile */ + .ui.right.rail { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: auto !important; + width: 100% !important; + max-height: 50vh; + overflow-y: auto; + border-left: none !important; + border-bottom: 1px solid #ddd; + } + + /* Let buttons wrap naturally on narrow screens */ + .button-wrapper { + display: flex; + flex-wrap: wrap; + align-items: center; + } +}