ui: fix column behavior with browser scaling

especially on chromium based browser (e.g. chrome, edge) it can happen,
depending on the zoom level, that the last column does not fit next to
the other columns and is moved below the other columns.

This results in an ugly looking UI and in the worst case makes it
unusable.

This can also be triggered if the monitor is set to a higher scaling /
different DPI settings. I was able to have the same problem in Edge when
setting the scaling in the windows display settings to 125% (Clone VM).

Changing the layout from columns with 0.5 width to extjs HBOXes with
flex 1 works as expected.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>

diff --git a/www/manager6/window/Clone.js b/www/manager6/window/Clone.js
index 5c6c2f758c770d27f10ae3234f3828dabcb21d3a..95ab1cd77ab340b29e458e2e7bf8ed6d31d22dbc 100644 (file)
--- a/www/manager6/window/Clone.js
+++ b/www/manager6/window/Clone.js
@@ -256,22 +256,21 @@ Ext.define('PVE.window.Clone', {
            bodyPadding: 10,
            reference: 'cloneform',
            border: false,
-           layout: 'column',
+           layout: 'hbox',
            defaultType: 'container',
-           columns: 2,
            fieldDefaults: {
                labelWidth: 100,
                anchor: '100%'
            },
            items: [
                {
-                   columnWidth: 0.5,
+                   flex: 1,
                    padding: '0 10 0 0',
                    layout: 'anchor',
                    items: col1
                },
                {
-                   columnWidth: 0.5,
+                   flex: 1,
                    padding: '0 0 0 10',
                    layout: 'anchor',
                    items: col2

diff --git a/www/manager6/window/Migrate.js b/www/manager6/window/Migrate.js
index 3096dd1ae641007d892544f02b571fce65a62946..91d1b30b79c6be7aee9055416d0b17ec84942d12 100644 (file)
--- a/www/manager6/window/Migrate.js
+++ b/www/manager6/window/Migrate.js
@@ -308,13 +308,11 @@ Ext.define('PVE.window.Migrate', {
            reference: 'formPanel',
            bodyPadding: 10,
            border: false,
-           layout: {
-               type: 'column'
-           },
+           layout: 'hbox',
            items: [
                {
                    xtype: 'container',
-                   columnWidth: 0.5,
+                   flex: 1,
                    items: [{
                        xtype: 'displayfield',
                        name: 'source',
@@ -334,7 +332,7 @@ Ext.define('PVE.window.Migrate', {
                },
                {
                    xtype: 'container',
-                   columnWidth: 0.5,
+                   flex: 1,
                    items: [{
                        xtype: 'pveNodeSelector',
                        reference: 'pveNodeSelector',

diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index e3519b1f101c0e07be15c44425307de7baa87244..3bf974f0e046e8012fe0d5c1279b257285c20dae 100644 (file)
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -23,10 +23,7 @@ Ext.define('PVE.window.Settings', {
        }
     ],
 
-    layout: {
-       type: 'column',
-       align: 'top'
-    },
+    layout: 'hbox',
 
     controller: {
        xclass: 'Ext.app.ViewController',
@@ -185,7 +182,7 @@ Ext.define('PVE.window.Settings', {
 
     items: [{
        xtype: 'fieldset',
-       columnWidth: 0.5,
+       flex: 1,
        title: gettext('Webinterface Settings'),
        margin: '5',
        layout: {
@@ -311,7 +308,7 @@ Ext.define('PVE.window.Settings', {
     {
        xtype: 'container',
        layout: 'vbox',
-       columnWidth: 0.5,
+       flex: 1,
        margin: '5',
        defaults: {
            width: '100%',