From d27a44a615441d00a01bbc3ee798df36c33c690d Mon Sep 17 00:00:00 2001
From: Aaron Lauterer <a.lauterer@proxmox.com>
Date: Mon, 2 Nov 2020 15:01:01 +0100
Subject: [PATCH] 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>
---
 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.39.2