diff --git a/src/styles.css b/src/styles.css index a85266f..f9e2bea 100644 --- a/src/styles.css +++ b/src/styles.css @@ -28,6 +28,7 @@ html, body { align-items: center; justify-content: center; padding: 0.5rem; + min-height: auto; } #app > * { @@ -41,6 +42,9 @@ html, body { /* Ensure it doesn't overflow */ min-width: 0; min-height: 0; + /* Contain everything inside */ + display: flex; + flex-direction: column; } /* When in fullscreen, use full viewport */ @@ -51,16 +55,6 @@ html, body { padding: 0; } -* { - box-sizing: border-box; -} - -body { - margin: 0; - min-height: 100vh; - background: transparent; -} - button, input, select { @@ -84,10 +78,6 @@ button { cursor: pointer; } -#app { - min-height: 100vh; -} - .layout { width: 100%; height: 100%; @@ -234,7 +224,7 @@ label span, position: relative; width: 100%; height: auto; - max-height: calc(100vh - 10.5rem); + max-height: 100%; aspect-ratio: var(--board-columns) / var(--board-rows); display: grid; gap: 0.32rem; @@ -290,8 +280,8 @@ label span, } .cell__node { - width: min(2.5vw, 1.6rem); - height: min(2.5vw, 1.6rem); + width: min(1.5em, 1.6rem); + height: min(1.5em, 1.6rem); min-width: 1rem; min-height: 1rem; border-radius: 50%; @@ -482,7 +472,7 @@ label span, .modal { width: min(1180px, 100%); - max-height: min(92vh, 980px); + max-height: min(92%, 980px); overflow: auto; } @@ -490,9 +480,9 @@ label span, position: fixed; top: 1rem; right: 1rem; - width: max(320px, calc(((100vw - 2rem) - 0.85rem) * 0.3091)); - max-width: calc(100vw - 2rem); - max-height: calc(100vh - 9.5rem); + width: max(320px, 30%); + max-width: calc(100% - 2rem); + max-height: calc(100% - 9.5rem); overflow: auto; z-index: 24; border-color: rgba(255, 255, 255, 0.12); @@ -816,7 +806,7 @@ button:disabled { .log-list { display: grid; gap: 0.55rem; - max-height: 18vh; + max-height: 30%; overflow: auto; }