Tabs dynamically adjust to width.

- Slightly adjusted textarea layouts.

web/model-manager.css

@@ -41,11 +41,11 @@
 }
 
 .model-manager textarea {
-    width: 100%;
-    font-size: 1.2em;
     border: solid 2px var(--border-color);
     border-radius: 8px;
+    font-size: 1.2em;
     resize: vertical;
+    width: 100%;
 }
 
 .model-manager input[type="file"] {

web/model-manager.js

@@ -2132,11 +2132,10 @@ class ModelInfoView {
                                 const notes = $el("textarea.comfy-multiline-input", {
                                     name: "model notes",
                                     value: value, 
-                                    rows: 10,
+                                    rows: 12,
                                 });
                                 this.elements.notes = notes;
                                 this.#savedNotesValue = value;
-                                elements.push(notes);
                                 elements.push($el("button", {
                                     textContent: "Save Notes",
                                     onclick: async (e) => {
@@ -2149,6 +2148,7 @@ class ModelInfoView {
                                         buttonAlert(e.target, saved);
                                     },
                                 }));
+                                elements.push(notes);
                             }
                             else if (key === "Description") {
                                 if (value !== "") {
@@ -3170,6 +3170,7 @@ class SettingsTab {
                         $: (el) => (settings["model-search-always-append"] = el),
                         name: "always include in model search",
                         placeholder: "example: -nsfw",
+                        rows: "6",
                     }),
                 ]),
             ]),
@@ -3292,6 +3293,9 @@ class SidebarButtons {
 }
 
 class ModelManager extends ComfyDialog {
+    /** @type {HTMLDivElement} */
+    element = null;
+    
     /** @type {ModelData} */
     #modelData = null;
     
@@ -3339,11 +3343,17 @@ class ModelManager extends ComfyDialog {
             this.#settingsTab.elements.settings,
             this.#refreshModels,
         );
-        this.#downloadTab = DownloadTab;
+        this.#downloadTab = downloadTab;
         
         const sidebarButtons = new SidebarButtons(this);
         this.#sidebarButtons = sidebarButtons;
         
+        const tabs = $tabs([
+            $tab("Download", [downloadTab.element]),
+            $tab("Models", [modelTab.element]),
+            $tab("Settings", [settingsTab.element]),
+        ]);
+        
         this.element = $el(
             "div.comfy-modal.model-manager",
             {
@@ -3368,15 +3378,25 @@ class ModelManager extends ComfyDialog {
                             }),
                         ]
                     ),
-                    $tabs([
+                    tabs,
-                        $tab("Download", [downloadTab.element]),
-                        $tab("Models", [modelTab.element]),
-                        $tab("Settings", [settingsTab.element]),
-                    ]),
                 ]),
             ]
         );
         
+        new ResizeObserver(() => {
+            if (this.element.style.display === "none") {
+                return;
+            }
+            const minWidth = 768; // magic value (could easily break)
+            const managerRect = this.element.getBoundingClientRect();
+            const isNarrow = managerRect.width < minWidth;
+            let texts = isNarrow ? ["📥︎", "📁", "⚙"] : ["Download", "Models", "Settings"];
+            const tabHeaders = tabs.children[0];
+            texts.forEach((text, i) => {
+                tabHeaders.children[i].innerText = text;
+            });
+        }).observe(this.element);
+        
         this.#init();
     }