diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index b6d2762f5..49678da25 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -264,14 +264,16 @@ class ExtraNetworksTab {
         const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
         // We actually want to select the tree view's column in the resize-handle-row.
         // This is what we actually show/hide, not the inner elements.
-        const div_tree = this.container_elem.querySelector(
-            `.extra-network-content.resize-handle-col:has(> #${this.tabname_full}_tree_list_scroll_area)`
-        );
+        const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
 
         // Remove "hidden" class if button is enabled, otherwise add it.
         div_dirs.classList.toggle("hidden", !("selected" in btn_dirs_view.dataset));
         div_tree.classList.toggle("hidden", !("selected" in btn_tree_view.dataset));
 
+        // Apply the current resize handle classes.
+        const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
+        resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
+
         await Promise.all([this.setupTreeList(), this.setupCardsList()]);
         this.tree_list.enable(true);
         this.cards_list.enable(true);
@@ -865,6 +867,13 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
     tab.tree_list.scroll_elem.parentElement.classList.toggle("hidden", !show);
     tab.tree_list.enable(show);
 
+    // Apply the resize-handle-hidden class to the resize-handle-row.
+    // NOTE: This can be simplified using only css with the ":has" selector however
+    // this is only recently supported in firefox. So for now we just add a class
+    // to the resize-handle-row instead.
+    const resize_handle_row = tab.tree_list.scroll_elem.closest(".resize-handle-row");
+    resize_handle_row.classList.toggle("resize-handle-hidden", !show);
+
     event.stopPropagation();
 }
 
diff --git a/style.css b/style.css
index 6669943bc..41a02f223 100644
--- a/style.css
+++ b/style.css
@@ -1212,6 +1212,7 @@ body.resizing .resize-handle {
     color: var(--input-placeholder-color) !important;
 }
 
+/* Custom scrollbar style. Only works on chromium based browsers. */
 .clusterize-scroll::-webkit-scrollbar {
     background: transparent;
     width: var(--text-lg);
@@ -1274,6 +1275,16 @@ body.resizing .resize-handle {
     overflow: auto;
 }
 
+/* Can be simplified using :has but this is only recently supported in firefox. */
+.resize-handle-row.resize-handle-hidden .resize-handle {
+    display: none;
+}
+
+/* Can be simplified using :has but this is only recently supported in firefox. */
+.resize-handle-row.resize-handle-hidden {
+    display: flex !important;
+}
+/*
 .resize-handle-row:has(> .resize-handle-col.hidden) {
     display: flex !important;
 }
@@ -1281,6 +1292,7 @@ body.resizing .resize-handle {
 .resize-handle-row:has(> .resize-handle-col.hidden)>.resize-handle {
     display: none;
 }
+*/
 
 .extra-network-tree {
     display: flex;