Re: [RFC PATCH datacenter-manager 1/2] ui: pve: tree: render guest tags directly after their name

["Lukas Wagner" <l.wagner@proxmox.com>]

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 <d.csapak@proxmox.com>
> ---
> 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 @@
>  
>  .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"));

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) => {
> +                        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"))


Looks good to me otherwise.

Reviewed-by: Lukas Wagner <l.wagner@proxmox.com>
Tested-by: Lukas Wagner <l.wagner@proxmox.com>