From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [IPv6:2a0f:8001:1:32::40]) by lore.proxmox.com (Postfix) with ESMTPS id E5A8D1FF0B7 for ; Fri, 02 Oct 2026 15:53:30 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id A406C216DB; Fri, 02 Oct 2026 15:53:30 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Subject: [RFC PATCH datacenter-manager 1/2] ui: pve: tree: render guest tags directly after their name Date: Fri, 2 Oct 2026 15:50:40 +0200 Message-ID: <20261002135324.3147672-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.419 Adjusted score from AWL reputation of From: address DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment (newer systems) RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: D2W5LDSE472EMV62MHAZO7JXKP4YFJJS X-Message-ID-Hash: D2W5LDSE472EMV62MHAZO7JXKP4YFJJS X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: instead of putting them in to a separate column. This increases the space available for the name when there are no (or small) tags, vs always reserving space for tags that might not exist. To show an ellipsis on the tags, add the overflow and text-overflow css classes for each tag and the overall tags container, To shrink the tag container before the guest name, use a flexbox trick: by setting the flex-shrink value to an much higher value than the name box, it shrinks the tags "first" (technically both shrink, but the text box now only a fraction of a pixel, which is not visible) and only when they reach a very small width the name box shrinks. This is rather a hack, but without reworking how we render the tree column as a whole, there is not really a better way. This also makes it more consistent with how tags are rendered in PVEs resource tree. Signed-off-by: Dominik Csapak --- really not sure about the flex-shrink hack, but reworking the markup here would mean revisiting it in several places. We can still do this, but i think this can be ok as a stop-gap measure. ui/css/pdm.scss | 3 +++ ui/src/pve/tree.rs | 19 ++++++++++--------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss index bd6bd02b..2a8fa1ce 100644 --- a/ui/css/pdm.scss +++ b/ui/css/pdm.scss @@ -51,7 +51,10 @@ .pve-tags { text-overflow: ellipsis; + overflow: hidden; .pve-tag { + text-overflow: ellipsis; + overflow: hidden; border-radius: var(--pwt-button-corner-shape); padding-inline: var(--pwt-spacer-2) } diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs index 0042331c..2faa4349 100644 --- a/ui/src/pve/tree.rs +++ b/ui/src/pve/tree.rs @@ -611,6 +611,7 @@ fn columns( .flex(1) .tree_column(store) .render(move |entry: &PveTreeNode| { + let mut extra = None; let (icon, text) = match entry { PveTreeNode::Root if loading => ( Container::from_tag("i").class("pwt-loading-icon"), @@ -622,9 +623,15 @@ fn columns( ), PveTreeNode::Node(r) => (utils::render_node_status_icon(r), r.node.to_string()), PveTreeNode::Qemu(r) => { + if !r.tags.is_empty() { + extra = Some(render_guest_tags(&r.tags).style("flex-shrink", "100000")); + } (utils::render_qemu_status_icon(r), render_qemu_name(r, true)) } PveTreeNode::Lxc(r) => { + if !r.tags.is_empty() { + extra = Some(render_guest_tags(&r.tags).style("flex-shrink", "100000")); + } (utils::render_lxc_status_icon(r), render_lxc_name(r, true)) } PveTreeNode::Storage(r) => { @@ -632,15 +639,9 @@ fn columns( } }; - render_tree_column(icon.into(), text).into() - }) - .into(), - DataTableColumn::new(tr!("Tags")) - .flex(1) - .render(move |entry: &PveTreeNode| match entry { - PveTreeNode::Lxc(lxc) => render_guest_tags(&lxc.tags[..]).into(), - PveTreeNode::Qemu(qemu) => render_guest_tags(&qemu.tags[..]).into(), - _ => html! {}, + render_tree_column(icon.into(), text) + .with_optional_child(extra) + .into() }) .into(), DataTableColumn::new(tr!("Actions")) -- 2.47.3