[pdm-devel] [PATCH datacenter-manager v2] ui: pve tree: ellipsize overly long resource name to avoid overflow

[Dominik Csapak <d.csapak@proxmox.com>]

due to how the html/css layout is constructed, we have to manually take
care of the (text)overflow here to have properly ellipsized text when the
column gets too small.

To do this for all resources types, rework the markup generation here a
bit, so that it's more consistent (e.g. same gap, align-items,etc).

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* reworked the whole column since this is relevant for all types of
  resources not only lxc. Thanks for @Thomas to notice that!
  (I did and tested with containers and forgot to do it for the rest,
  oops...)

 ui/src/pve/tree.rs | 55 +++++++++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index 50a5ae4..e74b187 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -532,35 +532,36 @@ fn columns(
             .flex(1)
             .tree_column(store)
             .render(move |entry: &PveTreeNode| {
-                let el = match entry {
-                    PveTreeNode::Root if loading => Row::new()
-                        .class(AlignItems::Center)
-                        .gap(4)
-                        .with_child(Container::from_tag("i").class("pwt-loading-icon"))
-                        .with_child(tr!("Querying Remote...")),
-                    PveTreeNode::Root => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(2)
-                        .with_child(Fa::new("server"))
-                        .with_child(tr!("Remote")),
-                    PveTreeNode::Node(r) => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(4)
-                        .with_child(utils::render_node_status_icon(r))
-                        .with_child(&r.node),
-                    PveTreeNode::Qemu(r) => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(2)
-                        .with_child(utils::render_qemu_status_icon(r))
-                        .with_child(render_qemu_name(r, true)),
-                    PveTreeNode::Lxc(r) => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(2)
-                        .with_child(utils::render_lxc_status_icon(r))
-                        .with_child(render_lxc_name(r, true)),
+                let (icon, text) = match entry {
+                    PveTreeNode::Root if loading => (
+                        Container::from_tag("i").class("pwt-loading-icon"),
+                        tr!("Querying Remote..."),
+                    ),
+                    PveTreeNode::Root => (
+                        Container::new().with_child(Fa::new("server")),
+                        tr!("Remote"),
+                    ),
+                    PveTreeNode::Node(r) => (utils::render_node_status_icon(r), r.node.to_string()),
+                    PveTreeNode::Qemu(r) => {
+                        (utils::render_qemu_status_icon(r), render_qemu_name(r, true))
+                    }
+                    PveTreeNode::Lxc(r) => {
+                        (utils::render_lxc_status_icon(r), render_lxc_name(r, true))
+                    }
                 };
 
-                Container::new().with_child(el).into()
+                Row::new()
+                    .min_width(0)
+                    .class(AlignItems::Center)
+                    .gap(2)
+                    .with_child(icon)
+                    .with_child(
+                        Container::new()
+                            .with_child(text)
+                            .style("text-overflow", "ellipsis")
+                            .style("overflow", "hidden"),
+                    )
+                    .into()
             })
             .into(),
         DataTableColumn::new(tr!("Tags"))
-- 
2.39.5



_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel