From 9786082e8613497f86d2d597cd1b22487e242305 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Mon, 18 Dec 2023 10:11:25 +0100
Subject: [PATCH] Make calendar better with narrow viewport

---
 slow-calendar/public/app.css | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/slow-calendar/public/app.css b/slow-calendar/public/app.css
index 84314be..0836def 100644
--- a/slow-calendar/public/app.css
+++ b/slow-calendar/public/app.css
@@ -7,16 +7,21 @@
 
 html {
   font-family: system-ui;
-  font-size: .8rem;
+  font-size: clamp(.6rem, 2vw, .8rem);
 }
 
 html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
+  overflow-x: auto;
   height: 100%;
 }
 
+body {
+  min-width: 350px;
+}
+
 button {
   border: 1px solid var(--border-color);
   background: #eee;
@@ -41,10 +46,20 @@ button:active {
   display: grid;
   gap: 1rem;
   grid-template-rows: max-content 1fr;
-  grid-template-columns: 1fr 200px;
+  grid-template-columns: 1fr clamp(100px, 25%, 200px);
   background-color: var(--background-color);
 }
 
+@media (max-width: 400px) {
+  #app {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+  }
+  #sidebar {
+    display: none;
+  }
+}
+
 #toolbar {
   padding: 1rem;
   background: white;