---
 themes/alps/assets/style.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index f91a271..ae49f18 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -78,7 +78,7 @@ select {
 }
 /** { box-sizing: content-box; }*/
 body { font-family: arial,sans-serif; font-size: 13px; padding: 0; margin: 0;
-  min-width: 1024px; min-height: 100vh; display: flex; flex-direction: column;
+  min-height: 100vh; display: flex; flex-direction: column;
 }
 
 input[type="text"],
@@ -127,6 +127,10 @@ footer { text-align: right; }
 
 
 aside { flex: 0 0 180px; }
+@media only screen and (max-width: 767px) {
+  /* TODO: Make this accessible */
+  aside { display: none; }
+}
 aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
 aside a.active { font-weight: bold; color: black; text-decoration: none; }
 aside img { display: block; }
@@ -440,7 +444,7 @@ main table tfoot {
 
 .message-grid {
   display: grid;
-  grid-template-columns: auto 1fr 10fr auto;
+  grid-template-columns: auto minmax(100px, 2fr) 10fr auto;
   grid-template-rows: auto;
 }
 
-- 
2.27.0

---
Javascript free, automatically hides the menu for medium-sized screens.

 themes/alps/assets/style.css | 10 ++++++++--
 themes/alps/mailbox.html     |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index ae49f18..d431f06 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -126,10 +126,16 @@ footer { text-align: right; }
 .container { flex: 1 auto; display: flex; flex-direction: column; flex-wrap: nowrap; min-width: 0; }
 
 
-aside { flex: 0 0 180px; }
+aside {
+  flex: 0 0 180px;
+  max-width: 180px;
+  transition: max-width .2s ease-in-out;
+}
+input.menuToggler { display: none; }
 @media only screen and (max-width: 767px) {
   /* TODO: Make this accessible */
-  aside { display: none; }
+  input.menuToggler:not(:checked) ~ aside.autohide { max-width: 0; }
+  input.menuToggler { display: block; }
 }
 aside a { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
 aside a.active { font-weight: bold; color: black; text-decoration: none; }
diff --git a/themes/alps/mailbox.html b/themes/alps/mailbox.html
index 0c70385..b52a635 100644
--- a/themes/alps/mailbox.html
+++ b/themes/alps/mailbox.html
@@ -2,7 +2,8 @@
 {{template "nav.html" .}}
 
 <div class="page-wrap">
-  <aside>
+  <input type="checkbox" class="menuToggler">
+  <aside class='autohide'>
     <!-- the logo image, dimensions 200x32 may be present or not -->
     <a href="/compose" class="new">Compose&nbsp;Mail</a>
     {{range .Mailboxes}}
-- 
2.27.0