[PATCH yew-mobile-gui 17/20] node status: align layout for node status with guest pages

[Shannon Sterz <s.sterz@proxmox.com>]

by adding icons and scrolling to the top-level tab bar.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/pages/page_node_status/mod.rs | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/page_node_status/mod.rs b/src/pages/page_node_status/mod.rs
index be6a98c..a566179 100644
--- a/src/pages/page_node_status/mod.rs
+++ b/src/pages/page_node_status/mod.rs
@@ -1,6 +1,7 @@
 use std::rc::Rc;
 
 use anyhow::Error;
+use pwt::css::Flex;
 use serde::{Deserialize, Serialize};
 
 use yew::prelude::*;
@@ -10,7 +11,7 @@ use pwt::AsyncAbortGuard;
 use pwt::prelude::*;
 use pwt::props::StorageLocation;
 use pwt::state::PersistentState;
-use pwt::widget::{Column, TabBar, TabBarItem};
+use pwt::widget::{Column, MiniScroll, TabBar, TabBarItem};
 
 use proxmox_yew_comp::http_get;
 
@@ -122,10 +123,12 @@ impl Component for PvePageNodeStatus {
 
         let tab_bar = TabBar::new()
             .class(pwt::css::JustifyContent::Center)
+            .class(Flex::Fill)
             .active(active_tab)
             .with_item(
                 TabBarItem::new()
                     .label(tr!("Dashboard"))
+                    .icon_class("fa fa-book")
                     .key("dashboard")
                     .on_activate(
                         ctx.link()
@@ -135,6 +138,7 @@ impl Component for PvePageNodeStatus {
             .with_item(
                 TabBarItem::new()
                     .label(tr!("Services"))
+                    .icon_class("fa fa-cogs")
                     .key("services")
                     .on_activate(
                         ctx.link()
@@ -144,6 +148,7 @@ impl Component for PvePageNodeStatus {
             .with_item(
                 TabBarItem::new()
                     .label(tr!("Updates"))
+                    .icon_class("fa fa-refresh")
                     .key("updates")
                     .on_activate(
                         ctx.link()
@@ -158,7 +163,11 @@ impl Component for PvePageNodeStatus {
                     .title(format!("Node {}", props.node))
                     .back("/resources"),
             )
-            .with_child(tab_bar)
+            .with_child(
+                MiniScroll::new(tab_bar)
+                    .class(Flex::None)
+                    .scroll_mode(pwt::widget::MiniScrollMode::Native),
+            )
             .with_child(content)
             .into()
     }
-- 
2.47.3