From 9b1a4da3344db10dc73085a26be2f317671c142a Mon Sep 17 00:00:00 2001
From: Ginger <75683114+gingershaped@users.noreply.github.com>
Date: Mon, 16 Sep 2024 14:52:27 -0400
Subject: [PATCH] Fix the styling, again

---
 src/latest/scripts/Editor.tsx  |   2 +-
 src/latest/scripts/Theseus.tsx | 148 ++++++++++++++++-----------------
 src/latest/style.scss          |  16 ++++
 3 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/src/latest/scripts/Editor.tsx b/src/latest/scripts/Editor.tsx
index c868830..78a40f0 100644
--- a/src/latest/scripts/Editor.tsx
+++ b/src/latest/scripts/Editor.tsx
@@ -37,7 +37,7 @@ const EXTENSIONS = [
         "&": { height: "100%" },
         "&.cm-focused": { outline: "none" },
         ".cm-scroller": {overflow: "auto"},
-        ".cm-panels": {"z-index": "0 !important"},
+        ".cm-tooltip": {"z-index": "300 !important"},
     }),
 ];
 const util = new UtilWorker();
diff --git a/src/latest/scripts/Theseus.tsx b/src/latest/scripts/Theseus.tsx
index 37c9598..fdee22a 100644
--- a/src/latest/scripts/Theseus.tsx
+++ b/src/latest/scripts/Theseus.tsx
@@ -167,81 +167,79 @@ function Theseus() {
                 }
             }} inputs={inputs} setShowFlagsDialog={setShowFlagsDialog} setShowSettingsDialog={setShowSettingsDialog} setShowShareDialog={setShowShareDialog} setShowInputDialog={setShowInputDialog} setShowElementOffcanvas={setShowElementOffcanvas}
         />
-        <Container fluid className="flex-grow-1">
-            <Row className="h-100">
-                <Col lg="6" className="g-0 d-flex flex-column">
-                    <Suspense
-                        fallback={
-                            <div className="d-flex justify-content-center py-4 m-2">
-                                <Spinner animation="border" className="" role="status">
-                                    <span className="visually-hidden">Loading...</span>
-                                </Spinner>
-                            </div>
-                        }
-                    >
-                        <Editor ratio="20%" code={header} setCode={setHeader} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
-                            Header
-                        </Editor>
-                        <Editor ratio="60%" code={code} setCode={setCode} theme={theme} literate={literate} claimFocus={setLastFocusedEditor} autoFocus>
-                            <div className="d-flex align-items-center">
-                                {bytecount}
-                                {literate ? (
-                                    <Button variant="link" size="sm" className="ms-auto p-0" onClick={literateToSbcs}>
-                                        literate to sbcs
-                                    </Button>
-                                ) : null}
-                            </div>
-                        </Editor>
-                        <Editor ratio="20%" code={footer} setCode={setFooter} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
-                            Footer
-                        </Editor>
-                    </Suspense>
-                </Col>
-                <Col lg="6" className="g-0 vstack">
-                    <Tab.Container
-                        defaultActiveKey="terminal"
-                    >
-                        <Nav variant="pills" className="align-items-end m-2">
-                            <Nav.Item>
-                                <Nav.Link eventKey="terminal">Terminal</Nav.Link>
-                            </Nav.Item>
-                            <Nav.Item>
-                                <Nav.Link eventKey="html">HTML</Nav.Link>
-                            </Nav.Item>
-                            <div className="ms-auto me-1">
-                                <CopyButton title="Copy output" generate={() => runnerRef.current?.getOutput() ?? ""} />
-                            </div>
-                        </Nav>
-                        <Tab.Content className="flex-grow-1 bg-body-tertiary">
-                            <Tab.Pane eventKey="terminal" className="h-100 position-relative">
-                                <Suspense
-                                    fallback={
-                                        <div className="d-flex justify-content-center pt-2 h-100 terminal-placeholder">
-                                            <Spinner animation="border" className="" role="status" variant="light">
-                                                <span className="visually-hidden">Loading...</span>
-                                            </Spinner>
-                                        </div>
-                                    }
-                                >
-                                    <VyTerminal
-                                        ref={runnerRef}
-                                        code={header + code + footer}
-                                        flags={[...serializeFlags(elementData.flagDefs, flags)]}
-                                        inputs={inputs.map((i) => i.value)}
-                                        timeout={timeout != null ? timeout * 1000 : null}
-                                        onStart={() => setState("running")}
-                                        onFinish={() => setState("idle")}
-                                    />
-                                </Suspense>
-                            </Tab.Pane>
-                            <Tab.Pane eventKey="html">
-                                <HtmlView getOutput={runnerRef.current?.getOutput} />
-                            </Tab.Pane>
-                        </Tab.Content>
-                    </Tab.Container>
-                </Col>
-            </Row>
-        </Container>
+        <main>
+            <div>
+                <Suspense
+                    fallback={
+                        <div className="d-flex justify-content-center py-4 m-2">
+                            <Spinner animation="border" className="" role="status">
+                                <span className="visually-hidden">Loading...</span>
+                            </Spinner>
+                        </div>
+                    }
+                >
+                    <Editor ratio="20%" code={header} setCode={setHeader} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
+                        Header
+                    </Editor>
+                    <Editor ratio="60%" code={code} setCode={setCode} theme={theme} literate={literate} claimFocus={setLastFocusedEditor} autoFocus>
+                        <div className="d-flex align-items-center">
+                            {bytecount}
+                            {literate ? (
+                                <Button variant="link" size="sm" className="ms-auto p-0" onClick={literateToSbcs}>
+                                    literate to sbcs
+                                </Button>
+                            ) : null}
+                        </div>
+                    </Editor>
+                    <Editor ratio="20%" code={footer} setCode={setFooter} theme={theme} literate={literate} claimFocus={setLastFocusedEditor}>
+                        Footer
+                    </Editor>
+                </Suspense>
+            </div>
+            <div className="vstack">
+                <Tab.Container
+                    defaultActiveKey="terminal"
+                >
+                    <Nav variant="pills" className="align-items-end m-2">
+                        <Nav.Item>
+                            <Nav.Link eventKey="terminal">Terminal</Nav.Link>
+                        </Nav.Item>
+                        <Nav.Item>
+                            <Nav.Link eventKey="html">HTML</Nav.Link>
+                        </Nav.Item>
+                        <div className="ms-auto me-1">
+                            <CopyButton title="Copy output" generate={() => runnerRef.current?.getOutput() ?? ""} />
+                        </div>
+                    </Nav>
+                    <Tab.Content className="flex-grow-1 bg-body-tertiary">
+                        <Tab.Pane eventKey="terminal" className="h-100 position-relative">
+                            <Suspense
+                                fallback={
+                                    <div className="d-flex justify-content-center pt-2 h-100 terminal-placeholder">
+                                        <Spinner animation="border" className="" role="status" variant="light">
+                                            <span className="visually-hidden">Loading...</span>
+                                        </Spinner>
+                                    </div>
+                                }
+                            >
+                                <VyTerminal
+                                    ref={runnerRef}
+                                    code={header + code + footer}
+                                    flags={[...serializeFlags(elementData.flagDefs, flags)]}
+                                    inputs={inputs.map((i) => i.value)}
+                                    timeout={timeout != null ? timeout * 1000 : null}
+                                    onStart={() => setState("running")}
+                                    onFinish={() => setState("idle")}
+                                />
+                            </Suspense>
+                        </Tab.Pane>
+                        <Tab.Pane eventKey="html">
+                            <HtmlView getOutput={runnerRef.current?.getOutput} />
+                        </Tab.Pane>
+                    </Tab.Content>
+                </Tab.Container>
+            </div>
+        </main>
     </>;
 }
 
diff --git a/src/latest/style.scss b/src/latest/style.scss
index 4753422..6610478 100644
--- a/src/latest/style.scss
+++ b/src/latest/style.scss
@@ -16,6 +16,22 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
 
+main {
+    display: flex;
+    flex-direction: row;
+    @include media-breakpoint-down(md) {
+        flex-direction: column;
+        > div {
+            height: 50%;
+        }
+    }
+    > div {
+        flex-basis: 50%;
+    }
+    width: 100%;
+    height: 100%;
+}
+
 code.code-pill {
     border-radius: $border-radius-sm;
     background-color: shade-color($code-color, 80%);