Made page slightly responsive.

1 files changed, 23 insertions, 3 deletions

diff --git a/static/style.css b/static/style.css
index 97aa1ad5..c9110a8c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -12,6 +12,14 @@ html, body {
     margin: 0;
     max-width: 100%;
     height: 100%;
+
+    flex-direction: row;
+}
+
+@media (max-aspect-ratio: 3/4) {
+    .root {
+        flex-direction: column;
+    }
 }
 
 .small-calendar {
@@ -61,12 +69,21 @@ html, body {
 }
 
 .sideinfo {
+    display: flex;
+
     width: 20em;
     height: 100%;
-    display: flex;
     flex-direction: column;
 }
 
+@media (max-aspect-ratio: 3/4) {
+    .sideinfo {
+        width: 100%;
+        height: 20em;
+        flex-direction: row;
+    }
+}
+
 .sideinfo .nav {
     height: 100%;
     display: flex;
@@ -120,10 +137,13 @@ html, body {
 .root main {
     display: flex;
     flex-direction: column;
-        flex-grow: 1;
-        min-width: 0;
+    flex-grow: 1;
+
+    min-width: 0;  /* for wide */
+    min-height: 0; /* for tall */
 }
 
+
 /* ---------------------------------------- */
 
 .caltable {