Correctly highlight options on mobile

web/static/css/style.css

@@ -15,6 +15,18 @@ div.reminderContent.is-collapsed .column.settings {
     display: none;
 }
 
+div.reminderContent.is-collapsed .button-row {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .button-row-edit {
+    display: none;
+}
+
+div.reminderContent.is-collapsed .reminder-topbar {
+    padding-bottom: 0;
+}
+
 div.reminderContent.is-collapsed .invert-collapses {
     display: inline-flex;
 }

web/static/js/main.js

@@ -454,19 +454,27 @@ document.addEventListener("guildSwitched", async (e) => {
         .querySelectorAll(".patreon-only")
         .forEach((el) => el.classList.add("is-locked"));
 
-    let $li = document.querySelector(`li[data-guild="${e.detail.guild_id}"]`);
+    let $li = document.querySelectorAll(`li[data-guild="${e.detail.guild_id}"]`);
 
-    if ($li === null) {
+    if ($li.length === 0) {
         switch_pane("user-error");
         return;
     }
 
     switch_pane(e.detail.pane);
     reset_guild_pane();
-    $li.querySelector("li > a").classList.add("is-active");
-    $li.querySelectorAll(`*[data-pane="${e.detail.pane}"]`).forEach((el) => {
-        el.classList.add("is-active");
-    });
+    document
+        .querySelectorAll(`li[data-guild="${e.detail.guild_id}"] > a`)
+        .forEach((el) => {
+            el.classList.add("is-active");
+        });
+    document
+        .querySelectorAll(
+            `li[data-guild="${e.detail.guild_id}"] *[data-pane="${e.detail.pane}"]`
+        )
+        .forEach((el) => {
+            el.classList.add("is-active");
+        });
 
     if (globalPatreon || (await fetch_patreon(e.detail.guild_id))) {
         document