[pve-devel] [PATCH pve_flutter_frontend] fix: ui: overflow error when `pending` chip comes to view

[pve-devel] [PATCH pve_flutter_frontend] fix: ui: overflow error when `pending` chip comes to view

[Shan Shaji]

When the pending chip appears after enabling an option from the options
page, Flutter throws an overflow error, causing the chip to render
on top of the Switch widget due to insufficient space between
the title and the switch toggle.

To resolve this, modify the layout so that the pending chip widget
is rendered in a column instead of a row.

Steps to reproduce the issue:
  - Navigate to the options tab of any VM.
  - Enable the "KVM hardware virtualization" option.
  - You will encounter a render flex error.

Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
 lib/widgets/pve_config_switch_list_tile.dart | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/widgets/pve_config_switch_list_tile.dart b/lib/widgets/pve_config_switch_list_tile.dart
index af02ee6..c209fbe 100644
--- a/lib/widgets/pve_config_switch_list_tile.dart
+++ b/lib/widgets/pve_config_switch_list_tile.dart
@@ -32,8 +32,8 @@ class PveConfigSwitchListTile extends StatelessWidget {
 
   Widget? _getTitle() {
     if (pending != null) {
-      return Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           title!,
           Chip(
-- 
2.39.5 (Apple Git-154)



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

Re: [pve-devel] [PATCH pve_flutter_frontend] fix: ui: overflow error when `pending` chip comes to view

[Michael Köppl]

Quickly tested this in my Android emulator by following the steps
described in the commit message (comment on that below). Was able to
reproduce the issue before the patch. Good that you found this. With the
patch applied, the render flex error does not appear anymore. Tested
that it works with portrait and landscape. Did not notice anything off
in the UI and I think it's a good solution to still make the pending
chip fit somewhere.

Consider this:
Tested-by: Michael Köppl <m.koeppl@proxmox.com>

On 6/12/25 11:53, Shan Shaji wrote:
> When the pending chip appears after enabling an option from the options
> page, Flutter throws an overflow error, causing the chip to render
> on top of the Switch widget due to insufficient space between
> the title and the switch toggle.
> 
> To resolve this, modify the layout so that the pending chip widget
> is rendered in a column instead of a row.
> 

I think the commit message would benefit from being rephrased to
something like "fix: guest config: render pending chip widget in Column
instead of Row to avoid render flex error when using option toggles", as
that is the part that semantically changes and it more clearly states
*where* the change was made.

> Steps to reproduce the issue:
>   - Navigate to the options tab of any VM.
>   - Enable the "KVM hardware virtualization" option.
>   - You will encounter a render flex error.

This should go under the --- as otherwise it'll be included in the
commit message.

> 
> Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
> ---
>  lib/widgets/pve_config_switch_list_tile.dart | 4 ++--
>  1 file changed, 2 insertions(+), 2 deletions(-)
> 
> diff --git a/lib/widgets/pve_config_switch_list_tile.dart b/lib/widgets/pve_config_switch_list_tile.dart
> index af02ee6..c209fbe 100644
> --- a/lib/widgets/pve_config_switch_list_tile.dart
> +++ b/lib/widgets/pve_config_switch_list_tile.dart
> @@ -32,8 +32,8 @@ class PveConfigSwitchListTile extends StatelessWidget {
>  
>    Widget? _getTitle() {
>      if (pending != null) {
> -      return Row(
> -        mainAxisAlignment: MainAxisAlignment.spaceBetween,
> +      return Column(
> +        crossAxisAlignment: CrossAxisAlignment.start,
>          children: [
>            title!,
>            Chip(



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

Re: [pve-devel] [PATCH pve_flutter_frontend] fix: ui: overflow error when `pending` chip comes to view

[Shan Shaji]

Thanks for the review. Will send another updated patch. 

On Fri Jun 13, 2025 at 1:19 PM CEST, Michael Köppl wrote:
> Quickly tested this in my Android emulator by following the steps
> described in the commit message (comment on that below). Was able to
> reproduce the issue before the patch. Good that you found this. With the
> patch applied, the render flex error does not appear anymore. Tested
> that it works with portrait and landscape. Did not notice anything off
> in the UI and I think it's a good solution to still make the pending
> chip fit somewhere.
>
> Consider this:
> Tested-by: Michael Köppl <m.koeppl@proxmox.com>
>
> On 6/12/25 11:53, Shan Shaji wrote:
> > When the pending chip appears after enabling an option from the options
> > page, Flutter throws an overflow error, causing the chip to render
> > on top of the Switch widget due to insufficient space between
> > the title and the switch toggle.
> > 
> > To resolve this, modify the layout so that the pending chip widget
> > is rendered in a column instead of a row.
> > 
>
> I think the commit message would benefit from being rephrased to
> something like "fix: guest config: render pending chip widget in Column
> instead of Row to avoid render flex error when using option toggles", as
> that is the part that semantically changes and it more clearly states
> *where* the change was made.
>
> > Steps to reproduce the issue:
> >   - Navigate to the options tab of any VM.
> >   - Enable the "KVM hardware virtualization" option.
> >   - You will encounter a render flex error.
>
> This should go under the --- as otherwise it'll be included in the
> commit message.
>
> > 
> > Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
> > ---
> >  lib/widgets/pve_config_switch_list_tile.dart | 4 ++--
> >  1 file changed, 2 insertions(+), 2 deletions(-)
> > 
> > diff --git a/lib/widgets/pve_config_switch_list_tile.dart b/lib/widgets/pve_config_switch_list_tile.dart
> > index af02ee6..c209fbe 100644
> > --- a/lib/widgets/pve_config_switch_list_tile.dart
> > +++ b/lib/widgets/pve_config_switch_list_tile.dart
> > @@ -32,8 +32,8 @@ class PveConfigSwitchListTile extends StatelessWidget {
> >  
> >    Widget? _getTitle() {
> >      if (pending != null) {
> > -      return Row(
> > -        mainAxisAlignment: MainAxisAlignment.spaceBetween,
> > +      return Column(
> > +        crossAxisAlignment: CrossAxisAlignment.start,
> >          children: [
> >            title!,
> >            Chip(



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

Re: [pve-devel] [PATCH pve_flutter_frontend] fix: ui: overflow error when `pending` chip comes to view

[Shan Shaji]

Superseeded By v2: https://lore.proxmox.com/pve-devel/20250616125844.52117-1-s.shaji@proxmox.com/T/#u

On Mon Jun 16, 2025 at 2:04 PM CEST, Shan Shaji wrote:
>
> Thanks for the review. Will send another updated patch. 
>
> On Fri Jun 13, 2025 at 1:19 PM CEST, Michael Köppl wrote:
> > Quickly tested this in my Android emulator by following the steps
> > described in the commit message (comment on that below). Was able to
> > reproduce the issue before the patch. Good that you found this. With the
> > patch applied, the render flex error does not appear anymore. Tested
> > that it works with portrait and landscape. Did not notice anything off
> > in the UI and I think it's a good solution to still make the pending
> > chip fit somewhere.
> >
> > Consider this:
> > Tested-by: Michael Köppl <m.koeppl@proxmox.com>
> >
> > On 6/12/25 11:53, Shan Shaji wrote:
> > > When the pending chip appears after enabling an option from the options
> > > page, Flutter throws an overflow error, causing the chip to render
> > > on top of the Switch widget due to insufficient space between
> > > the title and the switch toggle.
> > > 
> > > To resolve this, modify the layout so that the pending chip widget
> > > is rendered in a column instead of a row.
> > > 
> >
> > I think the commit message would benefit from being rephrased to
> > something like "fix: guest config: render pending chip widget in Column
> > instead of Row to avoid render flex error when using option toggles", as
> > that is the part that semantically changes and it more clearly states
> > *where* the change was made.
> >
> > > Steps to reproduce the issue:
> > >   - Navigate to the options tab of any VM.
> > >   - Enable the "KVM hardware virtualization" option.
> > >   - You will encounter a render flex error.
> >
> > This should go under the --- as otherwise it'll be included in the
> > commit message.



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