[PATCH yew-mobile-gui v2 16/21] lxc page: align layout for lxc guest with qemu guests

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

by adding icons and scrolling to the top-level tab panel

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/pages/page_lxc_status/mod.rs | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/pages/page_lxc_status/mod.rs b/src/pages/page_lxc_status/mod.rs
index 97ebddf..301e894 100644
--- a/src/pages/page_lxc_status/mod.rs
+++ b/src/pages/page_lxc_status/mod.rs
@@ -1,5 +1,6 @@
 use std::rc::Rc;
 
+use pwt::css::Flex;
 use pwt::props::StorageLocation;
 use serde::{Deserialize, Serialize};
 
@@ -8,7 +9,7 @@ use yew::virtual_dom::{VComp, VNode};
 
 use pwt::prelude::*;
 use pwt::state::PersistentState;
-use pwt::widget::{Column, TabBar, TabBarItem};
+use pwt::widget::{Column, MiniScroll, TabBar, TabBarItem};
 
 use crate::widgets::{GuestBackupPanel, TopNavBar};
 
@@ -95,10 +96,12 @@ impl Component for PvePageLxcStatus {
 
         let tab_bar = TabBar::new()
             .class(pwt::css::JustifyContent::Center)
+            .class(Flex::Fill)
             .active(active_tab)
             .with_item(
                 TabBarItem::new()
                     .label("Dashboard")
+                    .icon_class("fa fa-book")
                     .key("dashboard")
                     .on_activate(
                         ctx.link()
@@ -108,6 +111,7 @@ impl Component for PvePageLxcStatus {
             .with_item(
                 TabBarItem::new()
                     .label("Options")
+                    .icon_class("fa fa-gear")
                     .key("options")
                     .on_activate(
                         ctx.link()
@@ -115,10 +119,14 @@ impl Component for PvePageLxcStatus {
                     ),
             )
             .with_item(
-                TabBarItem::new().label("Backup").key("backup").on_activate(
-                    ctx.link()
-                        .callback(|_| Msg::SetViewState(ViewState::Backup)),
-                ),
+                TabBarItem::new()
+                    .label("Backup")
+                    .icon_class("fa fa-floppy-o")
+                    .key("backup")
+                    .on_activate(
+                        ctx.link()
+                            .callback(|_| Msg::SetViewState(ViewState::Backup)),
+                    ),
             );
 
         Column::new()
@@ -128,7 +136,11 @@ impl Component for PvePageLxcStatus {
                     .title(format!("CT {}", props.vmid))
                     .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