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;
+ }
+}