flexbox is not flexible enough

5 files changed, 25 insertions, 25 deletions

diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index 3d023e2..5ecb2b2 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -49,17 +49,18 @@ export function control_bar(room: Room, side_ui_container: HTMLElement): HTMLEle
 export interface SideUI { el: HTMLElement, set_state: (s: boolean) => void }
 export function side_ui(container: HTMLElement, content: HTMLElement, label: string): SideUI {
     // TODO: close other side uis
+    const tray = ediv({ class: "side-tray" }, content)
     const checkbox = einput("checkbox", {
         onchange: () => {
             if (checkbox.checked) {
-                content.classList.add("animate-in")
-                container.appendChild(content)
+                tray.classList.add("animate-in")
+                container.appendChild(tray)
             } else {
-                content.classList.remove("animate-in")
-                content.classList.add("animate-out")
+                tray.classList.remove("animate-in")
+                tray.classList.add("animate-out")
                 setTimeout(() => { // TODO breaks if ui is being enabled while timeout is active 
-                    content.classList.remove("animate-out")
-                    container.removeChild(content)
+                    tray.classList.remove("animate-out")
+                    container.removeChild(tray)
                 }, 400)
             }
         }
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index 4175393..ecd0465 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -40,13 +40,6 @@ body
     display: flex
     flex-direction: column
 
-.main
-    flex: 1
-    display: flex
-    flex-flow: row
-.control-bar
-    flex: 0
-
 h1
     text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
     font-size: 5em
diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass
index 1c5d8f1..2e020b3 100644
--- a/client-web/style/menu.sass
+++ b/client-web/style/menu.sass
@@ -6,15 +6,17 @@
 .control-bar
     background-color: var(--bg)
     padding: 0.75em
-    width: calc(100% - 1.5em)
+    width: auto
     border: 0px solid transparent
     display: flex
     align-items: center
     justify-content: center
     z-index: 100
 
+.main
+    position: relative
 .info-br
-    position: fixed
+    position: absolute
     bottom: 0px
     right: 0px
     display: block
@@ -25,9 +27,3 @@
     font-weight: bold
     color: var(--ac-light)
     padding: 0.5em
-
-.info-br
-    position: absolute
-    right: 0.5em
-    bottom: calc(64px + 0.5em)
-    text-align: right
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
index 46dde36..d7ffbf9 100644
--- a/client-web/style/room.sass
+++ b/client-web/style/room.sass
@@ -6,6 +6,7 @@
 .room
     overflow-y: scroll
     width: 100%
+    height: 100%
     display: flex
     flex-wrap: wrap
 
diff --git a/client-web/style/side.sass b/client-web/style/side.sass
index 89679f8..423746d 100644
--- a/client-web/style/side.sass
+++ b/client-web/style/side.sass
@@ -1,11 +1,11 @@
 
 .side-ui
     flex: 0
-    >*
+    .side-tray
         height: 100%
+        overflow-y: auto
         padding: 2em
         background-color: var(--bg)
-        float: right
 
     >.animate-in
         animation-name: side-slide-in
@@ -26,7 +26,16 @@
     to
         transform: translateX(100%)
 
+.main
+    flex: 1
+    display: flex
+    flex-flow: row
+    @media (max-width: 900px)
+        flex-flow: column
+
+.control-bar
+    flex: 0
 .preferences
-    width: 50em
+    width: min(50em, 100vw)
 .chat
-    width: 30em
+    width: min(30em, 100vw)