From f49049839650108c66a2f0245dc820a6babe32a2 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Thu, 14 Mar 2024 16:51:52 -0400
Subject: [PATCH] Fix bugs. clean up. Need to finish code cleanup.

---
 html/extra-networks-pane-dirs.html        |  15 +-
 html/extra-networks-pane-tree.html        |  24 +-
 html/extra-networks-pane.html             |  26 +-
 html/extra-networks-tree-row.html         |  37 +--
 javascript/extraNetworks.js               |  70 ++---
 javascript/extraNetworksClusterizeList.js |  16 +-
 modules/ui_extra_networks.py              |  37 ++-
 modules/ui_gradio_extensions.py           |   3 -
 style.css                                 | 320 ++++++++++------------
 9 files changed, 268 insertions(+), 280 deletions(-)

diff --git a/html/extra-networks-pane-dirs.html b/html/extra-networks-pane-dirs.html
index 5ce04289a..74f00d1a5 100644
--- a/html/extra-networks-pane-dirs.html
+++ b/html/extra-networks-pane-dirs.html
@@ -1,8 +1,9 @@
-    <div class="extra-network-pane-content-dirs">
-        <div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs'>
-            {dirs_html}
-        </div>
-        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
-            {items_html}
-        </div>
+<div class="extra-network-pane-content-dirs">
+    <div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs'>
+        {dirs_html}
     </div>
+    <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area' class='extra-network-cards clusterize-scroll'>
+        <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area' class='extra-network-cards-content clusterize-content'></div>
+    </div>
+</div>
+{cards_data_div}
diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html
index 1722a90b4..134fa1ea8 100644
--- a/html/extra-networks-pane-tree.html
+++ b/html/extra-networks-pane-tree.html
@@ -1,11 +1,13 @@
-    <div class="extra-network-pane-content-tree resize-handle-row">
-        <div
-            id='{tabname}_{extra_networks_tabname}_tree_scroll_area'
-            class='extra-network-tree clusterize-scroll {tree_scroll_area_div_extra_class}'
-            style='flex-basis: {extra_networks_tree_view_default_width}px'>
-            <div id='{tabname}_{extra_networks_tabname}_tree_content_area' class='clusterize-content'></div>
-        </div>
-        <div id='{tabname}_{extra_networks_tabname}_cards_scroll_area' class='extra-network-cards clusterize-scroll' style='flex-grow: 1;'>
-            <div id='{tabname}_{extra_networks_tabname}_cards_content_area' class='clusterize-content'></div>
-        </div>
-    </div>
\ No newline at end of file
+<div class="extra-network-pane-content-tree resize-handle-row">
+    <div
+        id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
+        class='extra-network-tree clusterize-scroll {tree_list_scroll_area_div_extra_class}'
+        style='flex-basis: {extra_networks_tree_view_default_width}px;'>
+        <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area' class='extra-network-tree-content clusterize-content'></div>
+    </div>
+    <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area' class='extra-network-cards clusterize-scroll' style='flex-grow: 1;'>
+        <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area' class='extra-network-cards-content clusterize-content'></div>
+    </div>
+</div>
+{tree_data_div}
+{cards_data_div}
\ No newline at end of file
diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index d486c117d..fab128471 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -2,7 +2,7 @@
     <div id="{tabname}_{extra_networks_tabname}_controls" class="extra-network-control" style="display:none">
         <div class="extra-network-control--search">
             <span class="extra-network-control--search-icon">
-                <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
+                <svg height="16" viewBox="0 0 16 16" version="1.1" width="16">
                     <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
                 </svg>
             </span>
@@ -13,7 +13,7 @@
                 placeholder="Search"
             >
             <button role="button" class="extra-network-control--search-clear" onclick="extraNetworksControlSearchClearOnClick(event, '{tabname}_{extra_networks_tabname}');">
-                <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
+                <svg height="16" viewBox="0 0 16 16" version="1.1" width="16">
                     <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path>
                 </svg>
             </button>
@@ -21,50 +21,50 @@
         <small>Sort: </small>
         <div 
             id="{tabname}_{extra_networks_tabname}_extra_sort_path"
-            class="extra-network-control--sort{sort_path_active}"
-            data-sort-mode="default"
+            class="extra-network-control--sort-mode {sort_path_active}"
+            data-sort-mode="path"
             title="Sort by path"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+            <i class="extra-network-control--icon"></i>
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_name"
-            class="extra-network-control--sort{sort_name_active}"
+            class="extra-network-control--sort-mode {sort_name_active}"
             data-sort-mode="name"
             title="Sort by name"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+            <i class="extra-network-control--icon"></i>
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_date_created"
-            class="extra-network-control--sort{sort_date_created_active}"
+            class="extra-network-control--sort-mode {sort_date_created_active}"
             data-sort-mode="date_created"
             title="Sort by date created"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+            <i class="extra-network-control--icon"></i>
         </div>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_date_modified"
-            class="extra-network-control--sort{sort_date_modified_active}"
+            class="extra-network-control--sort-mode {sort_date_modified_active}"
             data-sort-mode="date_modified"
             title="Sort by date modified"
             onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--icon extra-network-control--sort-icon"></i>
+            <i class="extra-network-control--icon"></i>
         </div>
 
         <small> </small>
         <div
             id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
             class="extra-network-control--sort-dir"
-            data-sort-dir="{data_sortdir}"
+            data-sort-dir="{data_sort_dir}"
             title="Sort ascending"
             onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');"
         >
-            <i class="extra-network-control--icon extra-network-control--sort-dir-icon"></i>
+            <i class="extra-network-control--icon extra-network-control--icon"></i>
         </div>
 
 
diff --git a/html/extra-networks-tree-row.html b/html/extra-networks-tree-row.html
index dede487ec..bcfe2cda9 100644
--- a/html/extra-networks-tree-row.html
+++ b/html/extra-networks-tree-row.html
@@ -1,20 +1,21 @@
-<div class="tree-list-item tree-list-item--{subitem}" {data_attributes}>
+<button
+    class="tree-list-item tree-list-item--{btn_type}"
+    onclick="extraNetworksTreeOnClick(event, '{tabname}_{extra_networks_tabname}');{onclick_extra}"
+    {data_attributes}>
     <span data-filterable-item-text hidden>{search_terms}</span>
-    <div class="tree-list-content tree-list-content-{btn_type}" type="button" onclick="extraNetworksTreeOnClick(event, '{tabname}_{extra_networks_tabname}');{onclick_extra}">
-        <span class='tree-list-item-action tree-list-item-action--leading'>
-            {action_list_item_action_leading}
-        </span>
-        <span class="tree-list-item-visual tree-list-item-visual--leading">
-            {action_list_item_visual_leading}
-        </span>
-        <span class="tree-list-item-label tree-list-item-label--truncate">
-            {action_list_item_label}
-        </span>
-        <span class="tree-list-item-visual tree-list-item-visual--trailing">
-            {action_list_item_visual_trailing}
-        </span>
-        <span class="tree-list-item-action tree-list-item-action--trailing">
-            {action_list_item_action_trailing}
-        </span>
-    </div>
+    <span class='tree-list-item-action tree-list-item-action--leading'>
+        {action_list_item_action_leading}
+    </span>
+    <span class="tree-list-item-visual tree-list-item-visual--leading">
+        {action_list_item_visual_leading}
+    </span>
+    <span class="tree-list-item-label tree-list-item-label--truncate">
+        {action_list_item_label}
+    </span>
+    <span class="tree-list-item-visual tree-list-item-visual--trailing">
+        {action_list_item_visual_trailing}
+    </span>
+    <span class="tree-list-item-action tree-list-item-action--trailing">
+        {action_list_item_action_trailing}
+    </span>
 </div>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index ba75fba64..32ddf2dc9 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -85,12 +85,22 @@ function toggleCss(key, css, enable) {
 }
 
 function extraNetworksRefreshTab(tabname_full) {
+    // Reapply controls since they don't change on refresh.
+    let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
+    let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`);
+
+    if (btn_tree_view.classList.contains("extra-network-control--enabled")) {
+        div_tree_list.classList.toggle("hidden", false); // unhide
+    } else {
+        div_tree_list.classList.toggle("hidden", true); // hide
+    }
+
+    // Don't do anything else if clusterizers isnt initialized.
     if (!(tabname_full in clusterizers)) {
         return;
     }
 
     for (_tabname_full of Object.keys(clusterizers)) {
-
         if (_tabname_full === tabname_full) {
             // Set the selected tab as active since it is now visible on page.
             clusterizers[_tabname_full].tree_list.enable();
@@ -102,12 +112,14 @@ function extraNetworksRefreshTab(tabname_full) {
         }
     }
 
-    clusterizers[tabname_full].tree_list.rebuild();
-    clusterizers[tabname_full].cards_list.rebuild();
-
+    // Force check update of data.
     for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) {
         extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem;
     }
+
+    // Rebuild to both update the data and to refresh the sizes of rows.
+    clusterizers[tabname_full].tree_list.rebuild();
+    clusterizers[tabname_full].cards_list.rebuild();
 }
 
 function setupExtraNetworksForTab(tabname) {
@@ -133,9 +145,6 @@ function setupExtraNetworksForTab(tabname) {
     this_tab.querySelectorAll(`:scope > [id^="${tabname}_"]`).forEach(function(elem) {
         let tabname_full = elem.id;
         let txt_search;
-        let btn_sort_mode;
-        let btn_sort_dir;
-        let btn_refresh;
 
         var applyFilter = function() {
             if (!(tabname_full in clusterizers)) {
@@ -143,8 +152,6 @@ function setupExtraNetworksForTab(tabname) {
                 return;
             }
             // Only touch cards_list. tree_list remains static.
-            clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode);
-            clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir);
             clusterizers[tabname_full].cards_list.applyFilter(txt_search.value);
         };
         extraNetworksApplyFilter[tabname_full] = applyFilter;
@@ -155,8 +162,6 @@ function setupExtraNetworksForTab(tabname) {
                 return;
             }
             // Only touch cards_list. tree_list remains static.
-            clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode);
-            clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir);
             clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts
         };
         extraNetworksApplySort[tabname_full] = applySort;
@@ -174,18 +179,6 @@ function setupExtraNetworksForTab(tabname) {
             .then((el) => {
                 txt_search = el;
             })
-            .then(() => {
-                waitForElement(`#${tabname_full}_extra_sort_mode`)
-                    .then((el) => { btn_sort_mode = el; });
-            })
-            .then(() => {
-                waitForElement(`#${tabname_full}_extra_sort_dir`)
-                    .then((el) => { btn_sort_dir = el; });
-            })
-            .then(() => {
-                waitForElement(`#${tabname_full}_extra_refresh`)
-                    .then((el) => { btn_refresh = el; });
-            })
             .then(() => {
                 waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`)
                     .then(() => { return; });
@@ -195,7 +188,6 @@ function setupExtraNetworksForTab(tabname) {
                     .then(() => { return; });
             })
             .then(() => {
-                console.log("LOADING TAB:", tabname_full, clusterizers[tabname_full]);
                 // Now that we have our elements in DOM, we create the clusterize lists.
                 clusterizers[tabname_full] = {
                     tree_list: new ExtraNetworksClusterizeTreeList({
@@ -208,8 +200,6 @@ function setupExtraNetworksForTab(tabname) {
                     }),
                 };
 
-                applyFilter();
-
                 // Debounce search text input. This way we only search after user is done typing.
                 let typing_timer;
                 let done_typing_interval_ms = 250;
@@ -219,7 +209,7 @@ function setupExtraNetworksForTab(tabname) {
                         typing_timer = setTimeout(applyFilter, done_typing_interval_ms);
                     }
                 });
-                // Triggered on "enter" key or when "x" is clicked to clear search.
+
                 txt_search.addEventListener("extra-network-control--search-clear", applyFilter);
 
                 // Insert the controls into the page.
@@ -488,7 +478,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) {
         var search_input_elem = gradioApp().querySelector("#" + tabname_full + "_extra_search");
         search_input_elem.value = _search_text;
         updateInput(search_input_elem);
-        applyExtraNetworksFilter(tabname_full);
+        applyExtraNetworkFilter(tabname_full);
     }
 
 
@@ -544,13 +534,16 @@ function extraNetworksControlSortModeOnClick(event, tabname_full) {
     var self = event.currentTarget;
     var parent = event.currentTarget.parentElement;
 
-    parent.querySelectorAll('.extra-network-control--sort').forEach(function(x) {
+    parent.querySelectorAll('.extra-network-control--sort-mode').forEach(function(x) {
         x.classList.remove('extra-network-control--enabled');
     });
 
     self.classList.add('extra-network-control--enabled');
 
-    applyExtraNetworkSort(tabname_full);
+    if (tabname_full in clusterizers) {
+        clusterizers[tabname_full].cards_list.setSortMode(self);
+        applyExtraNetworkSort(tabname_full);
+    }
 }
 
 function extraNetworksControlSortDirOnClick(event, tabname_full) {
@@ -571,7 +564,11 @@ function extraNetworksControlSortDirOnClick(event, tabname_full) {
         event.currentTarget.dataset.sortDir = "ascending";
         event.currentTarget.setAttribute("title", "Sort ascending");
     }
-    applyExtraNetworkSort(tabname_full);
+
+    if (tabname_full in clusterizers) {
+        clusterizers[tabname_full].cards_list.setSortDir(event.currentTarget);
+        applyExtraNetworkSort(tabname_full);
+    }
 }
 
 function extraNetworksControlTreeViewOnClick(event, tabname_full) {
@@ -588,8 +585,11 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
     button.classList.toggle("extra-network-control--enabled");
     var show = !button.classList.contains("extra-network-control--enabled");
 
-    var pane = gradioApp().getElementById(`${tabname_full}_pane`);
-    pane.classList.toggle("extra-network-dirs-hidden", show);
+    gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show);
+
+    // The pane sizes have changed. We need to recalc the sizes for our clusterizers.
+    clusterizers[tabname_full].tree_list.updateRows();
+    clusterizers[tabname_full].cards_list.updateRows();
 }
 
 function extraNetworksControlRefreshOnClick(event, tabname_full) {
@@ -707,7 +707,7 @@ function extraNetworksShowMetadata(text) {
             return;
         }
     } catch (error) {
-        console.eror(error);
+        console.error(error);
     }
 
     var elem = document.createElement('pre');
@@ -744,7 +744,7 @@ function requestGet(url, data, handler, errorHandler) {
     xhr.send(js);
 }
 
-function extraNetworksCopyCardPathToClipboard(event, path) {
+function extraNetworksCopyPathToClipboard(event, path) {
     navigator.clipboard.writeText(path);
     event.stopPropagation();
 }
diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js
index fe6cbbb3b..095b12700 100644
--- a/javascript/extraNetworksClusterizeList.js
+++ b/javascript/extraNetworksClusterizeList.js
@@ -98,6 +98,7 @@ class ExtraNetworksClusterize {
             callbacks: {},
         }
     ) {
+        console.log(`scroll_id: ${scroll_id}, content_id: ${content_id}`);
         if (scroll_id === undefined) {
             console.error("scroll_id is undefined!");
         }
@@ -281,16 +282,20 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
         let res = "";
         var style = getComputedStyle(document.body);
         let bg = style.getPropertyValue("--body-background-fill");
-        let fg = style.getPropertyValue("--neutral-800");
+        let fg = style.getPropertyValue("--border-color-primary");
+        let text_size = style.getPropertyValue("--button-large-text-size");
         for (let i = 1; i <= depth; i++) {
-            res += `${i - 0.6}rem 0 0 ${bg} inset,`;
-            res += `${i - 0.4}rem 0 0 ${fg} inset`;
+            res += `calc((${i} * ${text_size}) - (${text_size} * 0.6)) 0 0 ${bg} inset,`;
+            res += `calc((${i} * ${text_size}) - (${text_size} * 0.4)) 0 0 ${fg} inset`;
             res += (i+1 > depth) ? "" : ", ";
         }
         return res;
     }
 
     updateJson(json) {
+        var style = getComputedStyle(document.body);
+        //let spacing_sm = style.getPropertyValue("--spacing-sm");
+        let text_size = style.getPropertyValue("--button-large-text-size");
         for (const [k, v] of Object.entries(json)) {
             let div_id = k;
             let parsed_html = parseHtml(v)[0];
@@ -298,8 +303,9 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
             let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1;
             let expanded = "expanded" in parsed_html.dataset;
             let depth = Number(parsed_html.dataset.depth);
-            parsed_html.style.paddingLeft = `${depth}em`;
+            parsed_html.style.paddingLeft = `calc(${depth} * ${text_size})`;
             parsed_html.style.boxShadow = this.getBoxShadow(depth);
+            
             // Add the updated html to the data object.
             this.data_obj[div_id] = {
                 element: parsed_html,
@@ -360,7 +366,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
     constructor(...args) {
         super(...args);
 
-        this.sort_mode_str = "default";
+        this.sort_mode_str = "path";
         this.sort_dir_str = "ascending";
         this.filter_str = "";
     }
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 31ab4357f..f0f288460 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -57,31 +57,29 @@ def build_row(
     if btn_type not in ["file", "dir"]:
         raise ValueError("Invalid button type:", btn_type)
 
-    subitem = "has-subitem"
     action_list_item_action_leading = "<i class='tree-list-item-action-chevron'></i>"
     action_list_item_visual_leading = "🗀"
-    action_list_item_action_trailing = ""
     action_list_item_visual_trailing = ""
+    action_list_item_action_trailing = ""
 
     if btn_type == "file":
-        subitem = "subitem"
         action_list_item_visual_leading = "🗎"
         # Action buttons
-        action_list_item_visual_trailing += '<div class="button-row">'
-        action_list_item_visual_trailing += btn_copy_path_tpl.format(
+        action_list_item_action_trailing += '<div class="button-row">'
+        action_list_item_action_trailing += btn_copy_path_tpl.format(
             **{"filename": data_path}
         )
-        action_list_item_visual_trailing += btn_edit_item_tpl.format(
+        action_list_item_action_trailing += btn_edit_item_tpl.format(
             **{
                 "tabname": tabname,
                 "extra_networks_tabname": extra_networks_tabname,
                 "name": label,
             }
         )
-        action_list_item_visual_trailing += btn_metadata_tpl.format(
+        action_list_item_action_trailing += btn_metadata_tpl.format(
             **{"extra_networks_tabname": extra_networks_tabname, "name": label}
         )
-        action_list_item_visual_trailing += "</div>"
+        action_list_item_action_trailing += "</div>"
 
     data_attributes = ""
     data_attributes += f"data-path={data_path} " if data_path is not None else ""
@@ -102,7 +100,6 @@ def build_row(
     res = tree_row_tpl.format(
         **{
             "data_attributes": data_attributes,
-            "subitem": subitem,
             "search_terms": "",
             "btn_type": btn_type,
             "tabname": tabname,
@@ -504,7 +501,7 @@ class ExtraNetworksPage:
         else:
             return args
 
-    def create_tree_view_html(self, tabname: str) -> str:
+    def generate_tree_view_data_div(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
 
         Args:
@@ -578,11 +575,12 @@ class ExtraNetworksPage:
             self.btn_dirs_view_tpl.format(**{
                 "extra_class": "search-all" if subdir == "" else "",
                 "tabname_full": f"{tabname}_{self.extra_networks_tabname}",
+                "path": html.escape(subdir),
             }) for subdir in subdirs
         ])
         return subdirs_html
 
-    def create_card_view_html(self, tabname: str, *, none_message) -> str:
+    def generate_cards_view_data_div(self, tabname: str, *, none_message) -> str:
         """Generates HTML for the network Card View section for a tab.
 
         This HTML goes into the `extra-networks-pane.html` <div> with
@@ -596,7 +594,7 @@ class ExtraNetworksPage:
             HTML formatted string.
         """
         res = {}
-        for i, item in self.items.values():
+        for i, item in enumerate(self.items.values()):
             res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i)
 
         res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8")
@@ -636,18 +634,19 @@ class ExtraNetworksPage:
             "extra_networks_tabname": self.extra_networks_tabname,
             "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(),
             "data_sort_mode": shared.opts.extra_networks_card_order_field.lower().strip(),
-            "sort_path_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '',
-            "sort_name_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '',
-            "sort_date_created_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '',
-            "sort_date_modified_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '',
+            "sort_path_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '',
+            "sort_name_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '',
+            "sort_date_created_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '',
+            "sort_date_modified_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '',
             "tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "",
-            "cards_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None),
+            "tree_list_scroll_area_div_extra_class": "",
+            "cards_data_div": self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None),
             "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
-            "tree_view_div_default_display_class": "" if show_tree else "extra-network-dirs-hidden",
+            "tree_view_div_default_display_class": "" if show_tree else "hidden",
         }
 
         if shared.opts.extra_networks_tree_view_style == "Tree":
-            pane_content = self.pane_content_tree_tpl.format(**page_params, tree_html=self.create_tree_view_html(tabname))
+            pane_content = self.pane_content_tree_tpl.format(**page_params, tree_data_div=self.generate_tree_view_data_div(tabname))
         else:
             pane_content = self.pane_content_dirs_tpl.format(**page_params, dirs_html=self.create_dirs_view_html(tabname))
 
diff --git a/modules/ui_gradio_extensions.py b/modules/ui_gradio_extensions.py
index 9b83c76a9..2a8a99dc5 100644
--- a/modules/ui_gradio_extensions.py
+++ b/modules/ui_gradio_extensions.py
@@ -40,9 +40,6 @@ def css_html():
     for cssfile in scripts.list_files_with_name("style.css"):
         head += stylesheet(cssfile)
 
-    # Used by clusterize.js
-    head += '<link href="https://cdn.jsdelivr.net/npm/clusterize.js@1.0.0/clusterize.min.css" rel="stylesheet">'
-
     user_css = os.path.join(data_path, "user.css")
     if os.path.exists(user_css):
         head += stylesheet(user_css)
diff --git a/style.css b/style.css
index a30355bd6..789c638d2 100644
--- a/style.css
+++ b/style.css
@@ -1183,6 +1183,30 @@ body.resizing .resize-handle {
 }
 
 /* ========================= */
+.clusterize-scroll {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+.clusterize-content {
+    outline: 0;
+    counter-reset: clusterize-counter;
+}
+
+.clusterize-extra-row {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.clusterize-extra-row.clusterize-keep-parity {
+    display: none;
+}
+
+.clusterize-no-data {
+    text-align: center;
+}
+
 .clusterize-scroll::-webkit-scrollbar {
     background-color: transparent;
     width: 16px;
@@ -1205,95 +1229,58 @@ body.resizing .resize-handle {
 
 .extra-network-pane {
     display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
     height: calc(100vh - 24rem);
     resize: vertical;
     min-height: 52rem;
-    flex-direction: column;
     overflow: hidden;
 }
 
 .extra-network-pane .extra-network-pane-content-dirs {
     display: flex;
-    flex: 1;
     flex-direction: column;
-    overflow: hidden;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
 }
 
 .extra-network-pane .extra-network-pane-content-tree {
     display: flex;
-    flex: 1;
-    overflow: hidden;
-}
-
-.extra-network-dirs-hidden .extra-network-dirs{ display: none; }
-.extra-network-dirs-hidden .extra-network-tree{ display: none; }
-.extra-network-dirs-hidden .resize-handle { display: none; }
-.extra-network-dirs-hidden .resize-handle-row { display: flex !important; }
-
-.extra-network-pane .extra-network-tree {
-    flex: 1;
-    font-size: 1rem;
-    border: 1px solid var(--block-border-color);
-    overflow: clip auto !important;
-}
-
-.extra-network-pane .extra-network-cards {
-    flex: 3;
-    overflow: clip auto !important;
-    border: 1px solid var(--block-border-color);
-}
-
-.extra-network-pane .extra-network-tree .tree-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
+    flex-direction: row;
+    flex-wrap: nowrap;
     width: 100%;
-    overflow: hidden;
+    height: 100%;
 }
 
-
-.extra-network-pane .extra-network-cards::-webkit-scrollbar,
-.extra-network-pane .extra-network-tree::-webkit-scrollbar {
-    background-color: transparent;
-    width: 16px;
+.resize-handle-row:has(> .extra-network-tree.hidden) {
+    display: flex !important;
 }
 
-.extra-network-pane .extra-network-cards::-webkit-scrollbar-track,
-.extra-network-pane .extra-network-tree::-webkit-scrollbar-track {
-    background-color: transparent;
-    background-clip: content-box;
-}
-
-.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb,
-.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb {
-    background-color: var(--border-color-primary);
-    border-radius: 16px;
-    border: 4px solid var(--background-fill-primary);
-}
-
-.extra-network-pane .extra-network-cards::-webkit-scrollbar-button,
-.extra-network-pane .extra-network-tree::-webkit-scrollbar-button {
+.resize-handle-row:has(> .extra-network-tree.hidden) > .resize-handle {
     display: none;
 }
 
-.extra-network-control {
-    position: relative;
+.extra-network-tree {
     display: flex;
-    width: 100%;
-    padding: 0 !important;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    font-size: 1rem;
+    border: 1px solid var(--block-border-color);
+}
+
+.extra-network-cards {
+    display: flex;
+    border: 1px solid var(--block-border-color);
+}
+
+.extra-network-control {
+    display: flex;
+    font-size: var(--body-text-size);
     text-align: left;
     user-select: none;
     background-color: transparent;
     border: none;
-    transition: background 33.333ms linear;
-    grid-template-rows: min-content;
-    grid-template-columns: minmax(0, auto) repeat(4, min-content);
-    grid-gap: 0.1rem;
+    gap: var(--spacing-sm);
     align-items: start;
+    padding: var(--spacing-sm);
 }
 
 .extra-network-control small{
@@ -1302,79 +1289,6 @@ body.resizing .resize-handle {
     margin: 0 0.5rem 0 0.75rem;
 }
 
-/* BUTTON ELEMENTS */
-/* <button> */
-.extra-network-tree .tree-list-content {
-    position: relative;
-    display: grid;
-    width: 100%;
-    padding: 0 !important;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    font-size: 1em;
-    user-select: none;
-    background-color: transparent;
-    border: none;
-    transition: background 33.333ms linear;
-    grid-template-rows: min-content;
-    grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
-    grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
-    grid-gap: 0.1em;
-    place-items: center stretch;
-    text-align: center;
-    flex-grow: 1;
-    flex-basis: 100%;
-}
-
-/* Buttons for files. */
-.dark .extra-network-tree div.tree-list-content:hover {
-    -webkit-transition: all 0.05s ease-in-out;
-	transition: all 0.05s ease-in-out;
-    background-color: var(--neutral-800);
-}
-
-.extra-network-tree div.tree-list-content:hover {
-    -webkit-transition: all 0.05s ease-in-out;
-	transition: all 0.05s ease-in-out;
-    background-color: var(--neutral-200);
-}
-
-.dark .extra-network-tree div.tree-list-content[data-selected] {
-    background-color: var(--neutral-700);
-}
-
-.extra-network-tree div.tree-list-content[data-selected] {
-    background-color: var(--neutral-300);
-}
-
-.tree-list-item {
-    position: relative;
-    background: transparent;
-    margin: 0;
-    padding: 0;
-}
-
-/* ==== CHEVRON ICON ACTIONS ==== */
-/* Define the animation for the arrow when it is clicked. */
-.tree-list-item-action-chevron {
-    display: inline-flex;
-    height: 1em;
-    width: 1em;
-    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M7 7H17V17" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background-color: var(--input-placeholder-color);
-    transform: rotate(45deg);
-}
-
-.tree-list-item[data-expanded] .tree-list-item-action-chevron {
-    -ms-transform: rotate(225deg);
-    -webkit-transform: rotate(225deg);
-    transform: rotate(225deg);
-    transition: transform 0.2s; /* currently broken since we remove/add elements to clusterize.js list */
-}
-
 /* ==== SEARCH INPUT ACTIONS ==== */
 /* Add icon to left side of <input> */
 .extra-network-control--search {
@@ -1452,28 +1366,28 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-control--sort-mode-icon {
-    height: 1.5rem;
-    width: 1.5rem;
+.extra-network-control--icon {
+    height: var(--text-xxl);
+    width: var(--text-xxl);
     mask-repeat: no-repeat;
     mask-position: center center;
     mask-size: 100%;
-    background-color: var(--input-placeholder-color);
+    background: var(--button-secondary-background-fill);
 }
 
-.extra-network-control--sort-mode[data-sort-mode="path"] .extra-network-control--sort-mode-icon {
+.extra-network-control--sort-mode[data-sort-mode="path"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
 }
 
-.extra-network-control--sort-mode[data-sort-mode="name"] .extra-network-control--sort-mode-icon {
+.extra-network-control--sort-mode[data-sort-mode="name"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1841 6.69223C17.063 6.42309 16.7953 6.25 16.5002 6.25C16.2051 6.25 15.9374 6.42309 15.8162 6.69223L11.3162 16.6922C11.1463 17.07 11.3147 17.514 11.6924 17.6839C12.0701 17.8539 12.5141 17.6855 12.6841 17.3078L14.1215 14.1136H18.8789L20.3162 17.3078C20.4862 17.6855 20.9302 17.8539 21.308 17.6839C21.6857 17.514 21.8541 17.07 21.6841 16.6922L17.1841 6.69223ZM16.5002 8.82764L14.7965 12.6136H18.2039L16.5002 8.82764Z" fill="%231C274C"></path><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H13C13.4142 6.25 13.75 6.58579 13.75 7C13.75 7.41421 13.4142 7.75 13 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H10C10.4142 11.25 10.75 11.5858 10.75 12C10.75 12.4142 10.4142 12.75 10 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H8C8.41421 16.25 8.75 16.5858 8.75 17C8.75 17.4142 8.41421 17.75 8 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="%231C274C"></path></g></svg>');
 }
 
-.extra-network-control--sort-mode[data-sort-mode="date_created"] .extra-network-control--sort-mode-icon {
+.extra-network-control--sort-mode[data-sort-mode="date_created"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 11C14.2386 11 12 13.2386 12 16C12 18.7614 14.2386 21 17 21C19.7614 21 22 18.7614 22 16C22 13.2386 19.7614 11 17 11ZM17 11V9M2 9V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H13M2 9V8.2C2 7.0799 2 6.51984 2.21799 6.09202C2.40973 5.71569 2.71569 5.40973 3.09202 5.21799C3.51984 5 4.0799 5 5.2 5H13.8C14.9201 5 15.4802 5 15.908 5.21799C16.2843 5.40973 16.5903 5.71569 16.782 6.09202C17 6.51984 17 7.0799 17 8.2V9M2 9H17M5 3V5M14 3V5M15 16H17M17 16H19M17 16V14M17 16V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-.extra-network-control--sort-mode[data-sort-mode="date_modified"] .extra-network-control--sort-mode-icon {
+.extra-network-control--sort-mode[data-sort-mode="date_modified"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
@@ -1486,20 +1400,11 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-control--sort-dir-icon {
-    height: 1.5rem;
-    width: 1.5rem;
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background-color: var(--input-placeholder-color);
-}
-
-.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--sort-dir-icon {
+.extra-network-control--sort-dir[data-sort-dir="ascending"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--sort-dir-icon {
+.extra-network-control--sort-dir[data-sort-dir="descending"] .extra-network-control--icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
@@ -1551,7 +1456,7 @@ body.resizing .resize-handle {
     mask-repeat: no-repeat;
     mask-position: center center;
     mask-size: 100%;
-    background-color: var(--input-placeholder-color);
+    background: var(--input-placeholder-color);
 }
 
 .extra-network-control .extra-network-control--refresh-icon:active {
@@ -1563,11 +1468,78 @@ body.resizing .resize-handle {
 
 /* ==== TREE GRID CONFIG ==== */
 
+.extra-network-tree-content {
+    flex: 1;
+    padding: var(--spacing-md);
+}
+
+.extra-network-cards-content {
+    flex: 1;
+    padding: var(--spacing-md);
+}
+
+/* BUTTON ELEMENTS */
+/* <button> */
+.tree-list-item {
+    display: grid;
+    flex: 1;
+    width: 100%;
+    position: relative;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    padding-right: 0 !important;
+    margin: 0 !important;
+    user-select: none;
+    background: transparent;
+    border: none;
+    transition: background 33.333ms linear;
+    grid-template-rows: min-content;
+    grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
+    grid-template-columns: min-content min-content minmax(calc(var(--body-text-size) * 4), auto) min-content min-content;
+    grid-gap: var(--spacing-sm);
+    place-items: center stretch;
+    text-align: center;
+}
+
+.tree-list-item:hover {
+    -webkit-transition: all 0.05s ease-in-out;
+	transition: all 0.05s ease-in-out;
+    background: var(--button-secondary-background-fill-hover);
+}
+
+.tree-list-item[data-selected] {
+    background-color: var(--button-secondary-background-fill);
+}
+
+.tree-list-item > span {
+    font-size: var(--button-large-text-size);
+    color: var(--button-secondary-text-color);
+}
+
+/* ==== CHEVRON ICON ACTIONS ==== */
+/* Define the animation for the arrow when it is clicked. */
+.tree-list-item-action-chevron {
+    display: inline-flex;
+    height: var(--button-large-text-size);
+    width: var(--button-large-text-size);
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M7 7H17V17" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background: var(--input-placeholder-color);
+    transform: rotate(45deg);
+}
+
+.tree-list-item[data-expanded] .tree-list-item-action-chevron {
+    -ms-transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
+    transition: transform 0.2s; /* currently broken since we remove/add elements to clusterize.js list */
+}
+
 /* Text for button. */
 .tree-list-item-label {
     position: relative;
-    line-height: 1.25em;
-    color: var(--button-secondary-text-color);
     grid-area: label;
     padding-left: 0.25em;
     text-align: start;
@@ -1582,35 +1554,30 @@ body.resizing .resize-handle {
 
 /* Icon for button. */
 .tree-list-item-visual {
-    min-height: 1em;
-    color: var(--button-secondary-text-color);
     pointer-events: none;
     align-items: right;
 }
 
-
 /* Icon for button when it is before label. */
 .tree-list-item-visual--leading {
     grid-area: leading-visual;
-    width: 1em;
+    width: var(--button-large-text-size);
     text-align: right;
 }
 
 /* Icon for button when it is after label. */
 .tree-list-item-visual--trailing {
     grid-area: trailing-visual;
-    width: 1em;
+    width: var(--button-large-text-size);
     text-align: right;
 }
 
 /* Dropdown arrow for button. */
 .tree-list-item-action--leading {
     grid-area: leading-action;
-    margin-right: 0.5em;
-    margin-left: 0.2em;
 }
 
-.tree-list-content-file .tree-list-item-action--leading {
+.tree-list-item--file .tree-list-item-action--leading {
     visibility: hidden;
 }
 
@@ -1619,12 +1586,27 @@ body.resizing .resize-handle {
     display: inline-flex;
 }
 
-.tree-list-content .button-row {
-    display: inline-flex;
+.tree-list-item .button-row {
+    display: flex;
     visibility: hidden;
-    color: var(--button-secondary-text-color);
+    flex-direction: row;
+    align-items: center;
+    place-content: center;
+    gap: var(--spacing-sm);
+    box-sizing: border-box;
+    margin: 0;
 }
 
-.tree-list-content:hover .button-row {
+.tree-list-item:hover .button-row {
     visibility: visible;
 }
+
+.tree-list-item .card-button {
+    width: 100%;
+    height: 100%;
+    text-shadow: var(--shadow-drop);
+    font-size: var(--button-large-text-size);
+    color: var(--button-secondary-text-color);
+    padding: 0;
+    margin: 0;
+}