Re: [PATCH yew-mobile-gui 15/20] lxc page: align layout for lxc guest with qemu guests

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

On Fri May 8, 2026 at 5:05 PM CEST, Shannon Sterz wrote:
> 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..4092dd5 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-floppy-o")

i just noticed that the icons for "Options" and "Backup" should probably
be switched. this was copied over from the qemu panel, i'll send a
commit fixing that for both components in a minute. if a v2 becomes
necessary i'll in-line that patch for this component here.

>                      .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-gear")
> +                    .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()
>      }