diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index 4c395a531..115673022 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -137,6 +137,14 @@ +
@@ -152,18 +160,20 @@
-
-
-
-
-
- {dirs_html} -
+
+
+
+
+ {dirs_html}
-
-
+
+
+
+
{tree_list_loading_splash_content}
@@ -175,8 +185,10 @@ class='extra-network-tree-content clusterize-content'>
-
+
+
+
{card_list_loading_splash_content}
@@ -190,6 +202,10 @@
+
+
+
-
\ No newline at end of file +
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 968d8654c..bee9cb3c4 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -112,6 +112,7 @@ class ExtraNetworksTab { dirs_view_en = false; tree_view_en = false; card_view_en = false; + dets_view_en = false; card_list_splash_state = null; tree_list_splash_state = null; directory_filters = {}; @@ -149,6 +150,7 @@ class ExtraNetworksTab { this.dirs_view_en = opts.extra_networks_dirs_view_default_enabled; this.tree_view_en = opts.extra_networks_tree_view_default_enabled; this.card_view_en = opts.extra_networks_card_view_default_enabled; + this.dets_view_en = opts.extra_networks_dets_view_default_enabled; // setup this tab's controls this.controls_elem.id = `${this.tabname_full}_controls`; @@ -195,6 +197,7 @@ class ExtraNetworksTab { this.tree_view_en = false; this.dirs_view_en = false; this.card_view_en = false; + this.dets_view_en = false; this.directory_filters = {}; this.list_button_states = {}; this.resize_grid.destroy(); @@ -357,16 +360,20 @@ class ExtraNetworksTab { const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view"); const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view"); const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-view"); + const btn_dets_view = this.controls_elem.querySelector(".extra-network-control--dets-view"); this.dirs_view_en = "selected" in btn_dirs_view.dataset; this.tree_view_en = "selected" in btn_tree_view.dataset; this.card_view_en = "selected" in btn_card_view.dataset; + this.dets_view_en = "selected" in btn_dets_view.dataset; const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view"); const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view"); const div_card = this.container_elem.querySelector(".extra-network-content--card-view"); + const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view"); this.resize_grid.toggleElem(div_dirs, this.dirs_view_en); this.resize_grid.toggleElem(div_tree, this.tree_view_en); this.resize_grid.toggleElem(div_card, this.card_view_en); + this.resize_grid.toggleElem(div_dets, this.dets_view_en); await Promise.all([this.setupTreeList(), this.setupCardList()]); this.tree_list.enable(this.tree_view_en); @@ -390,6 +397,31 @@ class ExtraNetworksTab { this.refresh_in_progress = false; } + setupResizeGrid() { + const set_size_override = (grid_item, size_px) => { + // Limit dirs_view max height to the max height of its contents. + if (grid_item.elem.id === `${this.tabname_full}_dirs_view_row`) { + const elem = grid_item.elem.querySelector(".extra-network-content--dirs-view"); + if (!isElementLogError(elem)) { + return; + } + const max_height = elem.scrollHeight + getComputedBorderDims(elem).height; + return Math.min(size_px, max_height); + } + }; + + const grid_elem = this.container_elem.querySelector(".resize-grid"); + this.resize_grid = resizeGridSetup( + grid_elem, + { + id: `${this.tabname_full}_resize_grid`, + callbacks: { + set_size_override: set_size_override.bind(this), + }, + }, + ); + } + async load(show_prompt, show_neg_prompt) { this.movePrompt(show_prompt, show_neg_prompt); this.updateSplashState({ @@ -399,16 +431,17 @@ class ExtraNetworksTab { this.showControls(); if (isNullOrUndefined(this.resize_grid)) { - const elem = this.container_elem.querySelector(".resize-grid"); - this.resize_grid = resizeGridSetup(elem, {id: `${this.tabname_full}_resize_grid`}); + this.setupResizeGrid(); } const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view"); const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view"); const div_card = this.container_elem.querySelector(".extra-network-content--card-view"); + const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view"); this.resize_grid.toggleElem(div_dirs, this.dirs_view_en); this.resize_grid.toggleElem(div_tree, this.tree_view_en); this.resize_grid.toggleElem(div_card, this.card_view_en); + this.resize_grid.toggleElem(div_dets, this.dets_view_en); this.tree_list.enable(this.tree_view_en); this.card_list.enable(this.card_view_en); @@ -1238,6 +1271,21 @@ async function extraNetworksControlCardViewOnClick(event) { } } +function extraNetworksControlDetsViewOnClick(event) { + /** Handles `onclick` events for the Card Details View button. + * + * Toggles the card details view in the extra networks pane. + */ + const btn = event.target.closest(".extra-network-control--dets-view"); + const controls = btn.closest(".extra-network-controls"); + const tab = extra_networks_tabs[controls.dataset.tabnameFull]; + btn.toggleAttribute("data-selected"); + tab.dets_view_en = "selected" in btn.dataset; + + const div_dets = tab.container_elem.querySelector(".extra-network-content--dets-view"); + tab.resize_grid.toggleElem(div_dets, tab.dets_view_en); +} + function extraNetworksControlRefreshOnClick(event) { /** Handles `onclick` events for the Refresh Page button. * @@ -1593,6 +1641,7 @@ function extraNetworksSetupEventDelegators() { ".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick, ".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick, ".extra-network-control--card-view": extraNetworksControlCardViewOnClick, + ".extra-network-control--dets-view": extraNetworksControlDetsViewOnClick, ".extra-network-control--refresh": extraNetworksControlRefreshOnClick, }; diff --git a/javascript/resizeGrid.js b/javascript/resizeGrid.js index 4d9ef97cc..3b614e884 100644 --- a/javascript/resizeGrid.js +++ b/javascript/resizeGrid.js @@ -123,12 +123,31 @@ class ResizeGridItem { handle = null; visible = true; pad_px = PAD_PX; - constructor({id, parent, elem, axis} = {}) { + callbacks = { + /** Allows user to modify the `size_px` value passed to setSize(). + * Default callback just returns null. (no op). + * Args: + * item [ResizeGridItem]: This class instance. + * size_px [int]: The size (in px) to be overridden. + * Returns: + * int: The overridden setSize `size_px` paremeter. If null/undefined, + * then `size_px` does not get modified. + */ + set_size_override: (item, size_px) => { return; }, + }; + constructor({id, parent, elem, axis, callbacks} = {}) { this.id = isNullOrUndefined(id) ? _gen_id_string() : id; this.parent = parent; // the parent class instance this.elem = elem; this.axis = _axis_to_int(axis); + // Parse user specified callback overrides. + if (isObject(callbacks)) { + if (isFunction(callbacks.set_size_override)) { + this.callbacks.set_size_override = callbacks.set_size_override; + } + } + this.is_flex_grow = Boolean(parseInt(this.elem.style.flexGrow)); this.default_is_flex_grow = this.is_flex_grow; let flex_basis = parseInt(cssRelativeUnitToPx(this.elem.style.flexBasis)); @@ -227,9 +246,14 @@ class ResizeGridItem { return new_size - curr_size; } - setSize(px) { - this.elem.style.flexBasis = parseInt(px) + 'px'; - this.render(); + setSize(size_px) { + const new_size_px = this.callbacks.set_size_override(this, size_px); + if (isNumber(new_size_px)) { + size_px = new_size_px; + } + this.elem.style.flexBasis = parseInt(size_px) + 'px'; + //this.render(); + return size_px; } getSize() { @@ -281,10 +305,11 @@ class ResizeGridItem { class ResizeGridContainer { /** Class defining a collection of ResizeGridItem and ResizeGridHandle instances. */ - constructor({id, parent, elem} = {}) { + constructor({id, parent, elem, callbacks} = {}) { this.id = isNullOrUndefined(id) ? _gen_id_string() : id; this.parent = parent; this.elem = elem; + this.callbacks = callbacks; this.original_css_text = this.elem.style.cssText; this.grid = []; @@ -312,6 +337,7 @@ class ResizeGridContainer { id: id, parent: this, elem: elem, + callbacks: this.callbacks, axis: 0, }); row.genHandle('resize-grid--row-handle'); @@ -327,6 +353,7 @@ class ResizeGridContainer { id: id, parent: this, elem: elem, + callbacks: this.callbacks, axis: 1, }); col.genHandle('resize-grid--col-handle'); @@ -339,7 +366,8 @@ class ResizeGridContainer { build() { /** Generates rows/cols based on this instance element's content. */ - let row_elems = Array.from(this.elem.querySelectorAll('.resize-grid--row')); + let row_elems = Array.from(this.elem.querySelectorAll(":scope > .resize-grid--row")); + // If we do not have any rows, then we generate a single row to contain the cols. if (!row_elems.length) { const elem = document.createElement('div'); @@ -363,6 +391,9 @@ class ResizeGridContainer { row_elems.forEach((row_elem, i) => { this.addRow(id++, row_elem, i); const col_elems = row_elem.querySelectorAll('.resize-grid--col'); + if (col_elems.length === 1) { + col_elems[0].style.flexGrow = 1; + } col_elems.forEach((col_elem, j) => { this.addCol(id++, col_elem, i, j); }); @@ -760,10 +791,11 @@ class ResizeGrid { prev_dims = null; resize_observer = null; resize_observer_timer; - constructor(id, elem) { + constructor(id, elem, {callbacks}={}) { this.id = id; this.elem = elem; this.elem.dataset.gridId = this.id; + this.callbacks = callbacks; } destroy() { @@ -786,7 +818,11 @@ class ResizeGrid { this.container = null; } - this.container = new ResizeGridContainer(this, null, this.elem); + this.container = new ResizeGridContainer({ + parent: this, + elem: this.elem, + callbacks: this.callbacks, + }); this.container.build(); this.prev_dims = this.elem.getBoundingClientRect(); this.setupEvents(); @@ -865,6 +901,12 @@ class ResizeGrid { handle.elem.setPointerCapture(event.pointerId); + // Temporarily set styles for elements. These are cleared on pointerup. + // See `onMove()` comments for more info. + prev.elem.style.flexGrow = 0; + next.elem.style.flexGrow = 1; + next.elem.style.flexShrink = 1; + document.body.classList.add('resizing'); if (handle.axis === 0) { document.body.classList.add('resizing-col'); @@ -925,6 +967,14 @@ class ResizeGrid { handle.elem.releasePointerCapture(event.pointerId); + // Set the new flexBasis value for the `next` element then revert + // the style changes set in the `pointerup` event. + next.elem.style.flexBasis = next.setSize(next.getSize()); + prev.elem.style.flexGrow = Number(prev.is_flex_grow); + next.elem.style.flexGrow = Number(next.is_flex_grow); + next.elem.style.flexShrink = 0; + + document.body.classList.remove('resizing'); document.body.classList.remove('resizing-col'); document.body.classList.remove('resizing-row'); @@ -995,39 +1045,25 @@ class ResizeGrid { this.resize_observer_timer = null; } - onMove(event, prev, handle, next) { - /** Handles pointermove events. */ - const par_dims = this.elem.getBoundingClientRect(); - const a_dims = prev.elem.getBoundingClientRect(); - const b_dims = next.elem.getBoundingClientRect(); - let pos = handle.axis === 0 ? parseInt(event.y) : parseInt(event.x); - pos = Math.min( - handle.axis === 0 ? parseInt(par_dims.height) : parseInt(par_dims.width), - pos - ); - const a_start = - handle.axis === 0 ? parseInt(a_dims.top) : parseInt(a_dims.left); - const b_end = - handle.axis === 0 ? parseInt(b_dims.bottom) : parseInt(b_dims.right); - - let a = pos - Math.floor(handle.pad_px / 2); - let b = pos + Math.floor(handle.pad_px / 2); - - let a_lim = a_start + prev.min_size; - let b_lim = b_end - next.min_size; - - if (a < a_lim) { - a = a_lim; - b = a + handle.pad_px; - } - - if (b > b_lim) { - b = b_lim; - a = b - handle.pad_px; - } - - prev.setSize(a - a_start); - next.setSize(b_end - b); + onMove(event, a, handle, b) { + /** Handles pointermove events by calculating and setting new size of elements. + * + * While we are dragging the handle, we only manually set size for the + * item before the handle. During this time, the element after the handle + * should have flexGrow=1 and flexShrink=1 so that it can react to the size + * of the element before the handle. This simplifies calculations since we + * only have to do math for one side of handle. + */ + const a_dims = a.elem.getBoundingClientRect(); + const b_dims = b.elem.getBoundingClientRect(); + const a_start = Math.ceil(handle.axis === 0 ? a_dims.top : a_dims.left); + const b_end = Math.floor(handle.axis === 0 ? b_dims.bottom : b_dims.right); + const a_lim = a_start + a.min_size; + const b_lim = b_end - b.min_size; + const half_pad = Math.floor(handle.pad_px / 2); + let pos = parseInt(handle.axis === 0 ? event.y : event.x); + pos = Math.min(Math.max(pos, a_lim + half_pad), b_lim - half_pad); + a.setSize((pos - half_pad) - a_start); } onResize() { @@ -1155,13 +1191,13 @@ function resizeGridGetGrid(elem) { return grid; } -function resizeGridSetup(elem, {id} = {}) { +function resizeGridSetup(elem, {id, callbacks} = {}) { /** Sets up a new ResizeGrid instance for the provided element. */ isElementThrowError(elem); if (!isString(id)) { id = _get_unique_id(); } - const grid = new ResizeGrid(id, elem); + const grid = new ResizeGrid(id, elem, {callbacks: callbacks}); grid.setup(); resize_grids[id] = grid; return grid; diff --git a/modules/shared_options.py b/modules/shared_options.py index 8ae1aba0c..389a52326 100644 --- a/modules/shared_options.py +++ b/modules/shared_options.py @@ -266,9 +266,11 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s "extra_networks_dirs_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default.").needs_reload_ui(), "extra_networks_tree_view_default_enabled": OptionInfo(False, "Show the Extra Networks tree view by default").needs_reload_ui(), "extra_networks_card_view_default_enabled": OptionInfo(True, "Show the Extra Networks card view by default").needs_reload_ui(), + "extra_networks_dets_view_default_enabled": OptionInfo(False, "Show the Extra Networks card details view by default").needs_reload_ui(), "extra_networks_tree_view_show_files": OptionInfo(True, "Show files in tree view.").info("Disabling this option will remove file entries from the tree view and only show directories.").needs_reload_ui(), "extra_networks_dirs_view_default_height": OptionInfo(90, "Default height for the Directory Buttons view", gr.Number).info("in pixels").needs_reload_ui(), "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).info("in pixels").needs_reload_ui(), + "extra_networks_dets_view_default_width": OptionInfo(180, "Default width for the Extra Networks card details view", gr.Number).info("in pixels").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 d6628a6c3..68aee4877 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -841,6 +841,38 @@ class ExtraNetworksPage: dirs_view_en = shared.opts.extra_networks_dirs_view_default_enabled tree_view_en = shared.opts.extra_networks_tree_view_default_enabled card_view_en = shared.opts.extra_networks_card_view_default_enabled + dets_view_en = shared.opts.extra_networks_dets_view_default_enabled + + btn_sort_mode_path_data_attributes = "data-selected" if sort_mode == "path" else "" + btn_sort_mode_name_data_attributes = "data-selected" if sort_mode == "name" else "" + btn_sort_mode_date_created_data_attributes = "data-selected" if sort_mode == "date_created" else "" + btn_sort_mode_date_modified_data_attributes = "data-selected" if sort_mode == "date_modified" else "" + btn_sort_dir_ascending_data_attributes = "data-selected" if sort_dir == "ascending" else "" + btn_sort_dir_descending_data_attributes = "data-selected" if sort_dir == "descending" else "" + btn_dirs_view_data_attributes = "data-selected" if dirs_view_en else "" + btn_tree_view_data_attributes = "data-selected" if tree_view_en else "" + btn_card_view_data_attributes = "data-selected" if card_view_en else "" + btn_dets_view_data_attributes = "data-selected" if dets_view_en else "" + + dirs_view_row_data_attributes = "data-min-size=\"5vh\"" + if not dirs_view_en: + dirs_view_row_data_attributes += "" + + main_row_data_attributes = "data-min-size=\"5vh\"" + if not tree_view_en and not card_view_en and not dets_view_en: + main_row_data_attributes += "" + + tree_view_col_data_attributes = "data-min-size=\"10vw\"" + if not tree_view_en: + tree_view_col_data_attributes += "" + + card_view_col_data_attributes = "data-min-size=\"10vw\"" + if not card_view_en: + card_view_col_data_attributes += "" + + dets_view_col_data_attributes = "data-min-size=\"10vw\"" + if not dets_view_en: + dets_view_col_data_attributes += "" dirs_view_row_size = shared.opts.extra_networks_dirs_view_default_height tree_view_size = shared.opts.extra_networks_tree_view_default_width @@ -848,34 +880,42 @@ class ExtraNetworksPage: card_view_size = shared.opts.extra_networks_card_width else: card_view_size = 50 + dets_view_size = shared.opts.extra_networks_dets_view_default_width + + dirs_view_row_style = f"flex: 0 0 {dirs_view_row_size}px;" + main_row_style = "flex: 1 0 0px;" # expand to fill + tree_view_col_style = f"flex: 0 0 {tree_view_size}px;" + card_view_col_style = f"flex: 1 0 {card_view_size}px;" + dets_view_col_style = f"flex: 0 0 {dets_view_size}px;" return self.pane_tpl.format( - **{ - "tabname": tabname, - "extra_networks_tabname": self.extra_networks_tabname, - "btn_sort_mode_path_data_attributes": "data-selected" if sort_mode == "path" else "", - "btn_sort_mode_name_data_attributes": "data-selected" if sort_mode == "name" else "", - "btn_sort_mode_date_created_data_attributes": "data-selected" if sort_mode == "date_created" else "", - "btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "", - "btn_sort_dir_ascending_data_attributes": "data-selected" if sort_dir == "ascending" else "", - "btn_sort_dir_descending_data_attributes": "data-selected" if sort_dir == "descending" else "", - "btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "", - "btn_tree_view_data_attributes": "data-selected" if tree_view_en else "", - "btn_card_view_data_attributes": "data-selected" if card_view_en else "", - "dirs_view_row_style": f"flex: 0 0 {dirs_view_row_size}px;", - "tree_and_card_view_row_style": "flex: 1 0 0px;", # expand to fill - "tree_view_style": f"flex: 0 0 {tree_view_size}px;", - "card_view_style": f"flex: 1 0 {card_view_size}px;", - "dirs_view_row_data_attributes": "data-min-size=\"5vh\"", - "tree_and_card_view_row_data_attributes": "data-min-size=\"5vh\"", - "tree_view_data_attributes": "data-min-size=\"10vw\"", - "card_view_data_attributes": "data-min-size=\"10vw\"", - "dirs_html": dirs_html, - "card_list_loading_splash_content": card_list_loading_splash_content, - "card_list_no_data_splash_content": card_list_no_data_splash_content, - "tree_list_loading_splash_content": tree_list_loading_splash_content, - "tree_list_no_data_splash_content": tree_list_no_data_splash_content, - } + tabname=tabname, + extra_networks_tabname=self.extra_networks_tabname, + btn_sort_mode_path_data_attributes=btn_sort_mode_path_data_attributes, + btn_sort_mode_name_data_attributes=btn_sort_mode_name_data_attributes, + btn_sort_mode_date_created_data_attributes=btn_sort_mode_date_created_data_attributes, + btn_sort_mode_date_modified_data_attributes=btn_sort_mode_date_modified_data_attributes, + btn_sort_dir_ascending_data_attributes=btn_sort_dir_ascending_data_attributes, + btn_sort_dir_descending_data_attributes=btn_sort_dir_descending_data_attributes, + btn_dirs_view_data_attributes=btn_dirs_view_data_attributes, + btn_tree_view_data_attributes=btn_tree_view_data_attributes, + btn_card_view_data_attributes=btn_card_view_data_attributes, + btn_dets_view_data_attributes=btn_dets_view_data_attributes, + dirs_view_row_style=dirs_view_row_style, + main_row_style=main_row_style, + tree_view_col_style=tree_view_col_style, + card_view_col_style=card_view_col_style, + dets_view_col_style=dets_view_col_style, + dirs_view_row_data_attributes=dirs_view_row_data_attributes, + main_row_data_attributes=main_row_data_attributes, + tree_view_col_data_attributes=tree_view_col_data_attributes, + card_view_col_data_attributes=card_view_col_data_attributes, + dets_view_col_data_attributes=dets_view_col_data_attributes, + dirs_html=dirs_html, + card_list_loading_splash_content=card_list_loading_splash_content, + card_list_no_data_splash_content=card_list_no_data_splash_content, + tree_list_loading_splash_content=tree_list_loading_splash_content, + tree_list_no_data_splash_content=tree_list_no_data_splash_content, ) def create_item(self, name, index=None): diff --git a/style.css b/style.css index 23aa0ddda..2fea5fcd4 100644 --- a/style.css +++ b/style.css @@ -1200,37 +1200,34 @@ body.resizing.resize-grid-row { } /* ==== RESIZE HANDLE GRID ==== */ -.resize-grid { + +.resize-grid, .resize-grid--row, .resize-grid--col { display: flex; + flex-wrap: nowrap; + overflow: hidden; + gap: 0 !important; /* prevent gap between handle and cells. */ + /* prevent elements from oversizing the container. */ + min-width: 0; + min-height: 0; +} + +.resize-grid { flex-direction: column; width: 100%; height: 100%; - /* prevent elements from oversizing the container. */ - min-width: 0; - min-height: 0; } .resize-grid--row { - display: flex; flex-direction: row; - overflow: hidden; - flex-wrap: nowrap; - /* prevent elements from oversizing the container. */ - min-width: 0; - min-height: 0; } .resize-grid--col { - position: relative; - display: flex; flex-direction: column; - justify-content: center; - align-items: center; - overflow: hidden; - flex-wrap: nowrap; - /* prevent elements from oversizing the container. */ - min-width: 0; - min-height: 0; +} + +.resize-grid--cell { + display: block; + position: relative; } .resize-grid--handle { @@ -1316,20 +1313,22 @@ body.resizing.resize-grid-row { .extra-network-content { position: relative; display: flex; + flex-direction: column; flex-wrap: nowrap; + gap: var(--spacing-sm); + border: 1px solid var(--block-border-color); width: 100%; height: 100%; + /* prevent children from oversizing this container */ + min-height: 0; + min-width: 0; } .extra-network-content--container { - display: flex; - flex-wrap: nowrap; - width: 100%; - height: 100%; - flex-direction: column; - gap: var(--spacing-sm); + border: none; } +/* Dirs View needs a different display style. */ .extra-network-content--dirs-view { display: block; flex: 1; @@ -1342,10 +1341,6 @@ body.resizing.resize-grid-row { margin: var(--spacing-xs) !important; } -.extra-network-content--main-view { - min-height: 0; /* prevent children from oversizing this container */ -} - .extra-network-content.resize-handle-col { display: flex; flex-direction: column; @@ -1371,16 +1366,6 @@ body.resizing.resize-grid-row { } */ -.extra-network-content--tree-view { - display: flex; - border: 1px solid var(--block-border-color); -} - -.extra-network-content--card-view { - display: flex; - border: 1px solid var(--block-border-color); -} - .extra-network-controls-div { margin-left: auto !important; }