diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 0c763f710..02a871086 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -44,11 +44,11 @@
             <i class="extra-network-control--refresh-icon"></i>
         </div>
     </div>
-    <div class="extra-network-pane-content">
-        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree {tree_view_div_extra_class}'>
+    <div class="extra-network-pane-content resize-handle-row" style="display: {extra_network_pane_content_default_display};">
+        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree {tree_view_div_extra_class}' style='flex-basis: {extra_networks_tree_view_default_width}px; display: {tree_view_div_default_display};'>
             {tree_html}
         </div>
-        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
             {items_html}
         </div>
     </div>
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index d5855fe96..1610698bf 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -447,7 +447,26 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree").classList.toggle("hidden");
+    const tree = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree");
+    const parent = tree.parentElement;
+    let resizeHandle = parent.querySelector('.resize-handle');
+    tree.classList.toggle("hidden");
+
+    if (tree.classList.contains("hidden")) {
+        tree.style.display = 'none';
+        parent.style.display = 'flex';
+        if (resizeHandle) {
+            resizeHandle.style.display = 'none';
+        }
+    } else {
+        tree.style.display = 'block';
+        parent.style.display = 'grid';
+        if (!resizeHandle) {
+            setupResizeHandle(parent);
+            resizeHandle = parent.querySelector('.resize-handle');
+        }
+        resizeHandle.style.display = 'block';
+    }
     event.currentTarget.classList.toggle("extra-network-control--enabled");
 }
 
diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
index c4e9de581..50251ffc1 100644
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -22,6 +22,9 @@
     }
 
     function displayResizeHandle(parent) {
+        if (!parent.needHideOnMoblie) {
+            return true;
+        }
         if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
             parent.style.display = 'flex';
             parent.resizeHandle.style.display = "none";
@@ -41,7 +44,7 @@
 
             const ratio = newParentWidth / oldParentWidth;
 
-            const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
+            const newWidthL = Math.max(Math.floor(ratio * widthL), parent.minLeftColWidth);
             setLeftColGridTemplate(parent, newWidthL);
 
             R.parentWidth = newParentWidth;
@@ -64,7 +67,19 @@
 
         parent.style.display = 'grid';
         parent.style.gap = '0';
-        const gridTemplateColumns = `${parent.children[0].style.flexGrow}fr ${PAD}px ${parent.children[1].style.flexGrow}fr`;
+        let leftColTemplate = "";
+        if (parent.children[0].style.flexGrow) {
+            leftColTemplate = `${parent.children[0].style.flexGrow}fr`;
+            parent.minLeftColWidth = GRADIO_MIN_WIDTH;
+            parent.minRightColWidth = GRADIO_MIN_WIDTH;
+            parent.needHideOnMoblie = true;
+        } else {
+            leftColTemplate = parent.children[0].style.flexBasis;
+            parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2) / 2;
+            parent.minRightColWidth = 0;
+            parent.needHideOnMoblie = false;
+        }
+        const gridTemplateColumns = `${leftColTemplate} ${PAD}px ${parent.children[1].style.flexGrow}fr`;
         parent.style.gridTemplateColumns = gridTemplateColumns;
         parent.style.originalGridTemplateColumns = gridTemplateColumns;
 
@@ -132,7 +147,7 @@
                 } else {
                     delta = R.screenX - evt.changedTouches[0].screenX;
                 }
-                const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
+                const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - R.parent.minRightColWidth - PAD), R.parent.minLeftColWidth);
                 setLeftColGridTemplate(R.parent, leftColWidth);
             }
         });
@@ -171,10 +186,15 @@
     setupResizeHandle = setup;
 })();
 
-onUiLoaded(function() {
+
+function setupAllResizeHandles() {
     for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
-        if (!elem.querySelector('.resize-handle')) {
+        if (!elem.querySelector('.resize-handle') && !elem.children[0].classList.contains("hidden")) {
             setupResizeHandle(elem);
         }
     }
-});
+}
+
+
+onUiLoaded(setupAllResizeHandles);
+
diff --git a/modules/shared_options.py b/modules/shared_options.py
index 64f8f1967..aa26588df 100644
--- a/modules/shared_options.py
+++ b/modules/shared_options.py
@@ -258,6 +258,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(),
     "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
     "extra_networks_tree_view_default_enabled": OptionInfo(False, "Enables the Extra Networks directory tree view by default").needs_reload_ui(),
+    "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
     "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(),
     "textual_inversion_print_at_load": OptionInfo(False, "Print a list of Textual Inversion embeddings when loading model"),
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 34c46ed40..ad2c23054 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -531,9 +531,13 @@ class ExtraNetworksPage:
         data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
         tree_view_btn_extra_class = ""
         tree_view_div_extra_class = "hidden"
+        tree_view_div_default_display = "none"
+        extra_network_pane_content_default_display = "flex"
         if shared.opts.extra_networks_tree_view_default_enabled:
             tree_view_btn_extra_class = "extra-network-control--enabled"
             tree_view_div_extra_class = ""
+            tree_view_div_default_display = "block"
+            extra_network_pane_content_default_display = "grid"
 
         return self.pane_tpl.format(
             **{
@@ -546,6 +550,9 @@ class ExtraNetworksPage:
                 "tree_view_div_extra_class": tree_view_div_extra_class,
                 "tree_html": self.create_tree_view_html(tabname),
                 "items_html": self.create_card_view_html(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": tree_view_div_default_display,
+                "extra_network_pane_content_default_display": extra_network_pane_content_default_display,
             }
         )
 
@@ -693,7 +700,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             return ui.pages_contents
 
         button_refresh = gr.Button("Refresh", elem_id=f"{tabname}_{page.extra_networks_tabname}_extra_refresh_internal", visible=False)
-        button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js="function(){ " + f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" + " }")
+        button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js="function(){ " + f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" + " }").then(fn=lambda: None, _js='setupAllResizeHandles')
 
     def create_html():
         ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
@@ -703,7 +710,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             create_html()
         return ui.pages_contents
 
-    interface.load(fn=pages_html, inputs=[], outputs=ui.pages)
+    interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupAllResizeHandles')
 
     return ui
 
diff --git a/style.css b/style.css
index 8ce78ff0c..004038f89 100644
--- a/style.css
+++ b/style.css
@@ -1615,9 +1615,10 @@ body.resizing .resize-handle {
     display: inline-flex;
     visibility: hidden;
     color: var(--button-secondary-text-color);
-
+    width: 0;
 }
 
 .extra-network-tree .tree-list-content:hover .button-row {
     visibility: visible;
+    width: auto;
 }