Finish cleanup.

html/extra-networks-card-minimal.html

-<div class="card-minimal" onclick={card_clicked} data-name="{name}">
-    <span class="name">{name}</span>
-    <span class="button-row">{copy_path_button}{metadata_button}{edit_button}</span>
-</div>

html/extra-networks-card.html

-<div class="card" style={style} onclick="{card_clicked}" data-name="{name}" {sort_keys}>
+<div class="card" style="{style}" onclick="{card_clicked}" data-name="{name}" {sort_keys}>
 	{background_image}
 	<div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
-	<div class='actions'>
-		<div class='additional'>{search_terms}</div>
-		<span class='name'>{name}</span>
-		<span class='description'>{description}</span>
+	<div class="actions">
+		<div class="additional">{search_terms}</div>
+		<span class="name">{name}</span>
+		<span class="description">{description}</span>
 	</div>
 </div>

html/extra-networks-edit-item-button.html

 <div class="edit-button card-button"
     title="Edit metadata"
-    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{page_id}', '{name}')">
+    onclick="extraNetworksEditUserMetadata(event, '{tabname}', '{extra_networks_tabname}', '{name}')">
 </div>
\ No newline at end of file

html/extra-networks-metadata-button.html

 <div class="metadata-button card-button"
     title="Show internal metadata"
-    onclick="extraNetworksRequestMetadata(event, '{page_id}', '{name}')">
+    onclick="extraNetworksRequestMetadata(event, '{extra_networks_tabname}', '{name}')">
 </div>
\ No newline at end of file

html/extra-networks-pane.html

-<div id='{tabname}_{network_type_id}_pane' class='extra-network-pane'>
-    <div id='{tabname}_{network_type_id}_tree' class='extra-network-tree'>
+<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
+    <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree'>
         {tree_html}
     </div>
-    <div id='{tabname}_{network_type_id}_cards' class='extra-network-cards'>
+    <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
         {items_html}
     </div>
 </div>
\ No newline at end of file

html/extra-networks-tree-button.html

 <span data-filterable-item-text hidden>{search_terms}</span>
 <div class="tree-list-content {subclass}"
-    expanded="false"
     type="button"
-    onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');{onclick_extra}"
+    onclick="extraNetworksTreeOnClick(event, '{tabname}', '{extra_networks_tabname}');{onclick_extra}"
     data-path="{data_path}"
     data-hash="{data_hash}"
 >

html/extra-networks-tree.html

@@ -2,36 +2,36 @@
     <div class="tree-list-controls">
         <div class="tree-list-search">
             <input
-                id="{tabname}_{tab_id}_extra_search"
+                id="{tabname}_{extra_networks_tabname}_extra_search"
                 class="tree-list-search-text"
                 type="search"
                 placeholder="Filter files"
             >
         </div>
         <div 
-            id="{tabname}_{tab_id}_extra_sort"
+            id="{tabname}_{extra_networks_tabname}_extra_sort"
             class="tree-list-sort"
             data-sortmode="path"
             data-sortkey="sortPath-Ascending-640"
             title="Sort by path"
-            onclick="extraNetworksTreeSortOnClick(event, '{tabname}', '{tab_id}');"
+            onclick="extraNetworksTreeSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
             <i class="tree-list-sort-icon"></i>
         </div>
         <div
-            id="{tabname}_{tab_id}_extra_sort_dir"
+            id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
             class="tree-list-sort-dir"
             data-sortdir="Ascending"
             title="Sort ascending"
-            onclick="extraNetworksTreeSortDirOnClick(event, '{tabname}', '{tab_id}');"
+            onclick="extraNetworksTreeSortDirOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
             <i class="tree-list-sort-dir-icon"></i>
         </div>
         <div
-            id="{tabname}_{tab_id}_extra_refresh"
+            id="{tabname}_{extra_networks_tabname}_extra_refresh"
             class="tree-list-refresh"
             title="Refresh page"
-            onclick="extraNetworksTreeRefreshOnClick(event, '{tabname}', '{tab_id}');"
+            onclick="extraNetworksTreeRefreshOnClick(event, '{tabname}', '{extra_networks_tabname}');"
         >
             <i class="tree-list-refresh-icon"></i>
         </div>

modules/ui_extra_networks_user_metadata.py

@@ -14,7 +14,7 @@ class UserMetadataEditor:
         self.ui = ui
         self.tabname = tabname
         self.page = page
-        self.id_part = f"{self.tabname}_{self.page.id_page}_edit_user_metadata"
+        self.id_part = f"{self.tabname}_{self.page.extra_networks_tabname}_edit_user_metadata"
 
         self.box = None
 

style.css

@@ -879,13 +879,6 @@ footer {
     margin-bottom: 1em;
 }
 
-.extra-network-pane{
-    height: calc(100vh - 24rem);
-    overflow: clip scroll;
-    resize: vertical;
-    min-height: 52rem;
-}
-
 .extra-networks > div.tab-nav{
     min-height: 3.4rem;
 }
@@ -1182,23 +1175,63 @@ body.resizing .resize-handle {
 /* ========================= */
 .extra-network-pane {
     display: flex;
-}
-
-.extra-network-pane .extra-network-cards {
-    display: block;
+    height: calc(100vh - 24rem);
+    resize: vertical;
+    min-height: 52rem;
 }
 
 .extra-network-pane .extra-network-tree {
-    display: block;
+    flex: 1;
+    flex-direction: column;
+    display: flex;
     font-size: 1rem;
-    min-width: 25%;
     border: 1px solid var(--block-border-color);
-    overflow: hidden;
 }
 
-.extra-network-tree .tree-list {
-    margin: 0 0.25rem;
+.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;
+    width: 100%;
+    overflow: hidden;
+}
+
+.extra-network-pane .extra-network-tree .tree-list .tree-list-container {
+    flex: 1;
+    overflow: clip auto !important;
+    width: 100%;
+}
+
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar,
+.extra-network-pane .tree-list-container::-webkit-scrollbar {
+    background-color: transparent;
+    width: 16px;
+}
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar-track,
+.extra-network-pane .tree-list-container::-webkit-scrollbar-track {
+    background-color: transparent;
+    background-clip: content-box;
+}
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb,
+.extra-network-pane .tree-list-container::-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 .tree-list-container::-webkit-scrollbar-button {
+    display: none;
 }
 
 .extra-network-tree .tree-list .tree-list-controls {
@@ -1244,17 +1277,15 @@ body.resizing .resize-handle {
     background-color: transparent;
 }
 
-/* Directory <ul> visibility based on expanded attribute. */
-.extra-network-tree .tree-list-content[expanded=false]+.tree-list--subgroup {
+/* Directory <ul> visibility based on data-expanded attribute. */
+.extra-network-tree .tree-list-content+.tree-list--subgroup {
     height: 0;
-    overflow: hidden;
     visibility: hidden;
     opacity: 0;
 }
 
-.extra-network-tree .tree-list-content[expanded=true]+.tree-list--subgroup {
+.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup {
     height: auto;
-    overflow: visible;
     visibility: visible;
     opacity: 1;
 }
@@ -1307,7 +1338,7 @@ body.resizing .resize-handle {
     background-color: var(--neutral-800);
 }
 
-.dark .extra-network-tree div.tree-list-content[selected] {
+.dark .extra-network-tree div.tree-list-content[data-selected] {
     background-color: var(--neutral-700);
 }
 
@@ -1317,20 +1348,20 @@ body.resizing .resize-handle {
     background-color: var(--neutral-200);
 }
 
-.extra-network-tree div.tree-list-content[selected] {
+.extra-network-tree div.tree-list-content[data-selected] {
     background-color: var(--neutral-300);
 }
 
 /* ==== CHEVRON ICON ACTIONS ==== */
 /* Define the animation for the arrow when it is clicked. */
-.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
+.extra-network-tree .tree-list-content-dir .tree-list-item-action-chevron {
     -ms-transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
     transform: rotate(135deg);
     transition: transform 0.2s;
 }
 
-.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
+.extra-network-tree .tree-list-content-dir[data-expanded] .tree-list-item-action-chevron {
     -ms-transform: rotate(225deg);
     -webkit-transform: rotate(225deg);
     transform: rotate(225deg);