[pve-devel] [PATCH manager v2] ui: fix column behavior with browser scaling

[Aaron Lauterer]

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 at proxmox.com>
---
v1 -> v2: changed approach, use HBOX layouts instead of columns with
columnwidths slightly lower than 0.5.

 www/manager6/window/Clone.js    | 7 +++----
 www/manager6/window/Migrate.js  | 8 +++-----
 www/manager6/window/Settings.js | 9 +++------
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/www/manager6/window/Clone.js b/www/manager6/window/Clone.js
index 5c6c2f75..95ab1cd7 100644
--- 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 3096dd1a..91d1b30b 100644
--- 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 e3519b1f..3bf974f0 100644
--- 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%',
-- 
2.20.1