From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [45.144.208.40]) by lore.proxmox.com (Postfix) with ESMTPS id 5145E1FF09C for ; Mon, 05 Oct 2026 09:39:24 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id B5BB3213BA; Mon, 05 Oct 2026 09:39:23 +0200 (CEST) Mime-Version: 1.0 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=UTF-8 Date: Mon, 05 Oct 2026 09:39:18 +0200 Message-Id: From: "Lukas Wagner" To: "Dominik Csapak" , Subject: Re: [RFC PATCH datacenter-manager 1/2] ui: pve: tree: render guest tags directly after their name X-Mailer: aerc 0.21.0-0-g5549850facc2-dirty References: <20261002135324.3147672-1-d.csapak@proxmox.com> In-Reply-To: <20261002135324.3147672-1-d.csapak@proxmox.com> X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1791185959070 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.361 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: XYCMGSZPPBH7XE5CDIUYC337YGRNMTWL X-Message-ID-Hash: XYCMGSZPPBH7XE5CDIUYC337YGRNMTWL X-MailFrom: l.wagner@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: On Fri Oct 2, 2026 at 3:50 PM CEST, Dominik Csapak wrote: > 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. Not super familiar with flex-shrink, but it seems like a fine solution for me. Maybe it it could warrant a comment in the code though, so that future readers understand why it's there. > > 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 @@ > =20 > .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 =3D None; > let (icon, text) =3D match entry { > PveTreeNode::Root if loading =3D> ( > Container::from_tag("i").class("pwt-loading-icon= "), > @@ -622,9 +623,15 @@ fn columns( > ), > PveTreeNode::Node(r) =3D> (utils::render_node_status= _icon(r), r.node.to_string()), > PveTreeNode::Qemu(r) =3D> { > + if !r.tags.is_empty() { > + extra =3D Some(render_guest_tags(&r.tags).st= yle("flex-shrink", "100000")); Just wondering, what made you put the inline-style here, instead of setting it once inside render_guest_tags or on the .pve_tags CSS class? > + } > (utils::render_qemu_status_icon(r), render_qemu_= name(r, true)) > } > PveTreeNode::Lxc(r) =3D> { > + if !r.tags.is_empty() { > + extra =3D Some(render_guest_tags(&r.tags).st= yle("flex-shrink", "100000")); > + } > (utils::render_lxc_status_icon(r), render_lxc_na= me(r, true)) > } > PveTreeNode::Storage(r) =3D> { > @@ -632,15 +639,9 @@ fn columns( > } > }; > =20 > - render_tree_column(icon.into(), text).into() > - }) > - .into(), > - DataTableColumn::new(tr!("Tags")) > - .flex(1) > - .render(move |entry: &PveTreeNode| match entry { > - PveTreeNode::Lxc(lxc) =3D> render_guest_tags(&lxc.tags[.= .]).into(), > - PveTreeNode::Qemu(qemu) =3D> render_guest_tags(&qemu.tag= s[..]).into(), > - _ =3D> html! {}, > + render_tree_column(icon.into(), text) > + .with_optional_child(extra) > + .into() > }) > .into(), > DataTableColumn::new(tr!("Actions")) Looks good to me otherwise. Reviewed-by: Lukas Wagner Tested-by: Lukas Wagner