From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <t.lamprecht@proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits))
 (No client certificate requested)
 by lists.proxmox.com (Postfix) with ESMTPS id 0941F601F1
 for <pve-devel@lists.proxmox.com>; Mon, 16 Nov 2020 18:23:35 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
 by firstgate.proxmox.com (Proxmox) with ESMTP id EB442929C
 for <pve-devel@lists.proxmox.com>; Mon, 16 Nov 2020 18:23:04 +0100 (CET)
Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com
 [212.186.127.180])
 (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits)
 key-exchange X25519 server-signature RSA-PSS (2048 bits))
 (No client certificate requested)
 by firstgate.proxmox.com (Proxmox) with ESMTPS id 69BE8947F
 for <pve-devel@lists.proxmox.com>; Mon, 16 Nov 2020 18:23:04 +0100 (CET)
Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1])
 by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 3235F43725
 for <pve-devel@lists.proxmox.com>; Mon, 16 Nov 2020 18:23:04 +0100 (CET)
To: Proxmox VE development discussion <pve-devel@lists.proxmox.com>,
 Dominik Csapak <d.csapak@proxmox.com>
References: <20201102140102.26141-1-a.lauterer@proxmox.com>
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Message-ID: <91a49a09-eee2-3ed5-68ed-35dab9d6284b@proxmox.com>
Date: Mon, 16 Nov 2020 18:23:03 +0100
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:83.0) Gecko/20100101
 Thunderbird/83.0
MIME-Version: 1.0
In-Reply-To: <20201102140102.26141-1-a.lauterer@proxmox.com>
Content-Type: text/plain; charset=UTF-8
Content-Language: en-US
Content-Transfer-Encoding: 7bit
X-SPAM-LEVEL: Spam detection results:  0
 AWL -0.092 Adjusted score from AWL reputation of From: address
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 NICE_REPLY_A           -0.001 Looks like a legit reply (A)
 RCVD_IN_DNSWL_MED        -2.3 Sender listed at https://www.dnswl.org/,
 medium trust
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_PASS               -0.001 SPF: sender matches SPF record
Subject: Re: [pve-devel] [PATCH manager v2] ui: fix column behavior with
 browser scaling
X-BeenThere: pve-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>, 
 <mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>, 
 <mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Mon, 16 Nov 2020 17:23:35 -0000

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