From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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 ; 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 ; 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 ; 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 ; Mon, 16 Nov 2020 18:23:04 +0100 (CET) To: Proxmox VE development discussion , Dominik Csapak References: <20201102140102.26141-1-a.lauterer@proxmox.com> From: Thomas Lamprecht 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 List-Unsubscribe: , List-Archive: List-Post: List-Help: List-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 > --- > 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%', >