Increase the size of reminder names. Restyle.

web/static/js/main.js

@@ -56,6 +56,12 @@ function switch_pane(selector) {
 }
 
 function update_select(sel) {
+    let channelDisplay = sel.closest("div.reminderContent").querySelector(".channel-bar");
+
+    if (channelDisplay !== null) {
+        channelDisplay.textContent = `#${sel.selectedOptions[0].textContent}`;
+    }
+
     if (sel.selectedOptions[0].dataset["webhookAvatar"]) {
         sel.closest("div.reminderContent").querySelector("img.discord-avatar").src =
             sel.selectedOptions[0].dataset["webhookAvatar"];
@@ -231,6 +237,11 @@ async function serialize_reminder(node, mode) {
         }
     }
 
+    let name = node.querySelector('input[name="name"]').value;
+    if (name.length > 100) {
+        return { error: "Name exceeds maximum length (100)." };
+    }
+
     let rgb_color = window.getComputedStyle(
         node.querySelector("div.discord-embed")
     ).borderLeftColor;
@@ -366,6 +377,7 @@ function deserialize_reminder(reminder, frame, mode) {
     }
 
     update_interval(frame);
+    update_select(frame.querySelector(".channel-selector"));
 
     const lastChild = frame.querySelector("div.embed-multifield-box .embed-field-box");
 
@@ -451,6 +463,12 @@ document.addEventListener("channelsLoaded", () => {
 document.addEventListener("remindersLoaded", (event) => {
     const guild = guildId();
 
+    document.querySelectorAll("select.channel-selector").forEach((el) => {
+        el.addEventListener("change", (e) => {
+            update_select(e.target);
+        });
+    });
+
     for (let reminder of event.detail) {
         let node = reminder.node;