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

[Thomas Lamprecht]

On 02.11.20 15:01, Aaron Lauterer wrote:
> 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.

@Dominik, can you please take a look at this and apply (or a Reviewed-by tag).

> 
>  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%',
>