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

[pve-devel] [PATCH manager] 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%.

Setting the column width to a little bit less than 0.5 avoids this
problem.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
 www/manager6/window/Clone.js    | 4 ++--
 www/manager6/window/Migrate.js  | 4 ++--
 www/manager6/window/Settings.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/www/manager6/window/Clone.js b/www/manager6/window/Clone.js
index 5c6c2f75..836a3025 100644
--- a/www/manager6/window/Clone.js
+++ b/www/manager6/window/Clone.js
@@ -265,13 +265,13 @@ Ext.define('PVE.window.Clone', {
 	    },
 	    items: [
 		{
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    padding: '0 10 0 0',
 		    layout: 'anchor',
 		    items: col1
 		},
 		{
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    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..8ac1a173 100644
--- a/www/manager6/window/Migrate.js
+++ b/www/manager6/window/Migrate.js
@@ -314,7 +314,7 @@ Ext.define('PVE.window.Migrate', {
 	    items: [
 		{
 		    xtype: 'container',
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    items: [{
 			xtype: 'displayfield',
 			name: 'source',
@@ -334,7 +334,7 @@ Ext.define('PVE.window.Migrate', {
 		},
 		{
 		    xtype: 'container',
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    items: [{
 			xtype: 'pveNodeSelector',
 			reference: 'pveNodeSelector',
diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index e3519b1f..ab40af6f 100644
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -185,7 +185,7 @@ Ext.define('PVE.window.Settings', {
 
     items: [{
 	xtype: 'fieldset',
-	columnWidth: 0.5,
+	columnWidth: 0.495,
 	title: gettext('Webinterface Settings'),
 	margin: '5',
 	layout: {
@@ -311,7 +311,7 @@ Ext.define('PVE.window.Settings', {
     {
 	xtype: 'container',
 	layout: 'vbox',
-	columnWidth: 0.5,
+	columnWidth: 0.495,
 	margin: '5',
 	defaults: {
 	    width: '100%',
-- 
2.20.1

[pve-devel] [PATCH widget-toolkit] InputPanel: fix column scaling behavior

[Aaron Lauterer]

When scaling the browsers content either via the browser itself or
because the OS has a different scaling / DPI setting, it can happen that
not all columns have enough space next to each other and thus the last
column is moved further below.

This happens especially on chromium bases browsers (e.g. chrome, edge).

Setting the column width a tiny bit smaller helps to avoid this problem.

Signed-off-by: Aaron Lauterer <a.lauterer@proxmox.com>
---
 src/panel/InputPanel.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/panel/InputPanel.js b/src/panel/InputPanel.js
index 0ac5e48..305bcad 100644
--- a/src/panel/InputPanel.js
+++ b/src/panel/InputPanel.js
@@ -95,25 +95,25 @@ Ext.define('Proxmox.panel.InputPanel', {
 	    me.columns = 4;
 	    items = [
 		{
-		    columnWidth: 0.25,
+		    columnWidth: 0.249,
 		    padding: '0 10 0 0',
 		    layout: 'anchor',
 		    items: me.column1,
 		},
 		{
-		    columnWidth: 0.25,
+		    columnWidth: 0.249,
 		    padding: '0 10 0 0',
 		    layout: 'anchor',
 		    items: me.column2,
 		},
 		{
-		    columnWidth: 0.25,
+		    columnWidth: 0.249,
 		    padding: '0 10 0 0',
 		    layout: 'anchor',
 		    items: me.column3,
 		},
 		{
-		    columnWidth: 0.25,
+		    columnWidth: 0.249,
 		    padding: '0 0 0 10',
 		    layout: 'anchor',
 		    items: me.column4,
@@ -131,13 +131,13 @@ Ext.define('Proxmox.panel.InputPanel', {
 	    me.columns = 2;
 	    items = [
 		{
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    padding: '0 10 0 0',
 		    layout: 'anchor',
 		    items: me.column1,
 		},
 		{
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    padding: '0 0 0 10',
 		    layout: 'anchor',
 		    items: me.column2 || [], // allow empty column
-- 
2.20.1

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

[Aaron Lauterer]

Please consider these patches obsolete for now as I am working on a less hacky way to deal with this.