Scroll track list separately

2 files changed, 19 insertions, 5 deletions

diff --git a/extension/popup/index.html b/extension/popup/index.html
index fe03bff..ec49842 100644
--- a/extension/popup/index.html
+++ b/extension/popup/index.html
@@ -19,12 +19,16 @@
             </div>
             <div class="content">
                 <div class="content-screen" id="rule-content">
-                    <h1 id="hostname"></h1>
-                    <p>(Applies to: <span id="wildcard-representation">*</span>)</p>
-                    <h2>Tracks</h2>
+                    <div>
+                        <h1 id="hostname"></h1>
+                        <p>(Applies to: <span id="wildcard-representation">*</span>)</p>
+                        <h2>Tracks</h2>
+                    </div>
                     <ul id="track-list"></ul>
-                    <h1>General Settings</h1>
-                    <p><label><input id="disable-everywhere" type="checkbox"> Disable everywhere for now?</label></p>
+                    <div>
+                        <h1>General Settings</h1>
+                        <p><label><input id="disable-everywhere" type="checkbox"> Disable everywhere for now?</label></p>
+                    </div>
                 </div>
                 <div class="content-screen visible" id="no-rule-content">
                     <p>No rule selected. Please select or create one!</p>
diff --git a/extension/popup/style.css b/extension/popup/style.css
index c05071f..00e0f14 100644
--- a/extension/popup/style.css
+++ b/extension/popup/style.css
@@ -158,3 +158,13 @@ h1 {
 #track-list li.action {
     text-align: center;
 }
+
+#rule-content.visible {
+    display: flex;
+    flex-direction: column;
+}
+
+#track-list {
+    flex-grow: 1;
+    overflow-y: scroll;
+}