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

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

[Dominik Csapak]

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.

 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

[RFC PATCH datacenter-manager 2/2] ui: pve: tree: size action column better

[Dominik Csapak]

instead of using a fixed pixel size. While the new expression looks ugly, that is the
exact size needed to show all action columns in all density variants.

Ideally we'd have a way to automatically size a column by it's content
(in a buffered grid), but until we implement such a thing, this should
be ok.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
meh, i don't like either the before nor the after. I have some ideas
how we could make this work on the datatable side in a generic way, but
this is rather involved, and i'm not sure if it's worth it to spend
much time on it when we can do it like this.

 ui/src/pve/tree.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index 2faa4349..6cac96fa 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -645,7 +645,7 @@ fn columns(
             })
             .into(),
         DataTableColumn::new(tr!("Actions"))
-            .width("180px")
+            .width("calc(4 * (20px + 2* var(--pwt-spacer-1)) + 2 * var(--pwt-spacer-2))")
             .render(move |entry: &PveTreeNode| {
                 let (id, local_id, guest_info, node) = match entry {
                     PveTreeNode::Lxc(r) => {
-- 
2.47.3

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

[Lukas Wagner]

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>

Re: [RFC PATCH datacenter-manager 2/2] ui: pve: tree: size action column better

[Lukas Wagner]

On Fri Oct 2, 2026 at 3:50 PM CEST, Dominik Csapak wrote:
> instead of using a fixed pixel size. While the new expression looks ugly, that is the
> exact size needed to show all action columns in all density variants.
>
> Ideally we'd have a way to automatically size a column by it's content
> (in a buffered grid), but until we implement such a thing, this should
> be ok.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
> meh, i don't like either the before nor the after. I have some ideas
> how we could make this work on the datatable side in a generic way, but
> this is rather involved, and i'm not sure if it's worth it to spend
> much time on it when we can do it like this.
>
>  ui/src/pve/tree.rs | 2 +-
>  1 file changed, 1 insertion(+), 1 deletion(-)
>
> diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
> index 2faa4349..6cac96fa 100644
> --- a/ui/src/pve/tree.rs
> +++ b/ui/src/pve/tree.rs
> @@ -645,7 +645,7 @@ fn columns(
>              })
>              .into(),
>          DataTableColumn::new(tr!("Actions"))
> -            .width("180px")
> +            .width("calc(4 * (20px + 2* var(--pwt-spacer-1)) + 2 * var(--pwt-spacer-2))")

Could be worth a comment IMO, until we have a nicer way to handle this
generically.

>              .render(move |entry: &PveTreeNode| {
>                  let (id, local_id, guest_info, node) = match entry {
>                      PveTreeNode::Lxc(r) => {

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

[Dominik Csapak]

superseded by patch 7/11 in 
https://lore.proxmox.com/pdm-devel/20261005110049.1851404-1-d.csapak@proxmox.com/