From fc5eccb0f814eb47e722d52c6728713b869974e3 Mon Sep 17 00:00:00 2001
From: Christian Bastian <80225746+cdb-boop@users.noreply.github.com>
Date: Fri, 5 Apr 2024 01:36:01 -0400
Subject: [PATCH] Adjusted sidebar button wrapping.

- Added issues/bugs GitHub link to Settings Tab.
---
 web/model-manager.css |  7 +++++--
 web/model-manager.js  | 21 ++++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/web/model-manager.css b/web/model-manager.css
index e2d3670..d2522a0 100644
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -36,8 +36,8 @@
 }
 
 .model-manager .sidebar-buttons .sidebar-button-active {
-    border-color: var(--fg-color);
-    color: var(--fg-color);
+    overflow: hidden;
+    color: var(--input-text);
 }
 
 /* common */
@@ -154,6 +154,9 @@
 .model-manager .sidebar-buttons {
     overflow: hidden;
     color: var(--input-text);
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
 }
 
 /* main content */
diff --git a/web/model-manager.js b/web/model-manager.js
index 8aad536..3ed1d10 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -3042,6 +3042,12 @@ class SettingsTab {
             $: (el) => (this.element = el),
         }, [
             $el("h1", ["Settings"]),
+            $el("a", {
+                    href: "https://github.com/hayden-fr/ComfyUI-Model-Manager/issues/"
+                }, [
+                    "File bugs and issues here."
+                ]
+            ),
             $el("div", [
                 $el("button", {
                     $: (el) => (this.elements.reloadButton = el),
@@ -3174,7 +3180,7 @@ class SidebarButtons {
             }
         }
 
-        const sidebarStates = ["sidebar-left", "sidebar-bottom", "sidebar-top", "sidebar-right"];
+        const sidebarStates = ["sidebar-right", "sidebar-top", "sidebar-bottom", "sidebar-left"]; // TODO: magic numbers
         let stateIndex;
         for (stateIndex = 0; stateIndex < sidebarStates.length; stateIndex++) {
             const state = sidebarStates[stateIndex];
@@ -3202,12 +3208,9 @@ class SidebarButtons {
             $: (el) => (this.element = el),
         },
         [
+            
             $el("button.icon-button", {
-                textContent: "◧",
-                onclick: (event) => this.#setSidebar(event),
-            }),
-            $el("button.icon-button", {
-                textContent: "⬓",
+                textContent: "◨",
                 onclick: (event) => this.#setSidebar(event),
             }),
             $el("button.icon-button", {
@@ -3215,7 +3218,11 @@ class SidebarButtons {
                 onclick: (event) => this.#setSidebar(event),
             }),
             $el("button.icon-button", {
-                textContent: "◨",
+                textContent: "⬓",
+                onclick: (event) => this.#setSidebar(event),
+            }),
+            $el("button.icon-button", {
+                textContent: "◧",
                 onclick: (event) => this.#setSidebar(event),
             }),
         ]);