From b73c14c7cc1499a580c26404ba09fc88df7c622a Mon Sep 17 00:00:00 2001
From: Ben Busby <noreply+git@benbusby.com>
Date: Mon, 1 Nov 2021 16:55:33 -0600
Subject: [PATCH] Set max height for config menu

The config menu has gotten out of control recently, but rather than
reducing functionality, I'm just going to set a max height for the div
and allow scrolling within the menu.

Ultimately though this indicates that the app is getting a bit too
complicated (imo). Striking a balance between customization and
minimalism is less of a priority for me nowadays though, hence why I'm
willing to let it slide for now. At some point, maybe when there are
more contributors, it could be nice to refactor this in some way so that
it isn't overwhelming to new users who are looking to customize their
instance (that's just me speculating btw, I haven't actually heard from
anyone who thinks there are too many options in that menu).
---
 app/static/css/main.css     | 1 +
 app/static/js/controller.js | 2 +-
 app/templates/index.html    | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index 1dd2374..c937ee2 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -102,6 +102,7 @@ button::-moz-focus-inner {
 }
 
 .open {
+    overflow-y: scroll;
     padding-bottom: 20px;
 }
 
diff --git a/app/static/js/controller.js b/app/static/js/controller.js
index 9dc88a2..05b68ec 100644
--- a/app/static/js/controller.js
+++ b/app/static/js/controller.js
@@ -26,7 +26,7 @@ const setupConfigLayout = () => {
         if (content.style.maxHeight) {
             content.style.maxHeight = null;
         } else {
-            content.style.maxHeight = content.scrollHeight + "px";
+            content.style.maxHeight = "400px";
         }
 
         content.classList.toggle("open");
diff --git a/app/templates/index.html b/app/templates/index.html
index 05099a2..cf8f342 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -41,9 +41,10 @@
             }
 
             .content {
-                max-height: 720px;
+                max-height: 400px;
                 padding: 18px;
                 border-radius: 10px;
+                overflow-y: scroll;
             }
 
             .collapsible {