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 4C6086321E for ; Fri, 2 Oct 2020 14:52:38 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 44DACA178 for ; Fri, 2 Oct 2020 14:52:38 +0200 (CEST) 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) server-digest SHA256) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id 84A5AA16B for ; Fri, 2 Oct 2020 14:52:37 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 4EC6C45BC1 for ; Fri, 2 Oct 2020 14:52:37 +0200 (CEST) To: Thomas Lamprecht , Proxmox VE development discussion References: <20201001121840.23081-1-a.lauterer@proxmox.com> <8a9a3acc-2552-5fe5-8f6b-11a9e4b28abc@proxmox.com> From: Aaron Lauterer Message-ID: Date: Fri, 2 Oct 2020 14:52:36 +0200 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Thunderbird/78.3.1 MIME-Version: 1.0 In-Reply-To: <8a9a3acc-2552-5fe5-8f6b-11a9e4b28abc@proxmox.com> Content-Type: text/plain; charset=utf-8; format=flowed Content-Language: en-US Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.122 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.26 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] ui: FirewallRules.js: fix #3049 wider rule number column 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: Fri, 02 Oct 2020 12:52:38 -0000 On 10/1/20 5:10 PM, Thomas Lamprecht wrote: > oh, and maybe you can try to switch that whole column definition away from fixed > widths to relative "flex" only. Just needs to look OK on 720p and quite good on > 1080p. It's not always possible, but most of the time it works out well and not > using fixed widths is always nicer, IMO. > I gave it a quick try and I think adding flex properties does help on large screens but for smaller screens I would keep the former width values as minWidth to keep the table readable and to force extjs to switch it to horizontal scrolling as it is currently doing with the fixed widths. Even 720p is already where the horizontal scroll bar shows up. This is the git diff I used: diff --git a/www/manager6/grid/FirewallRules.js b/www/manager6/grid/FirewallRules.js index 42035129..fee9c177 100644 --- a/www/manager6/grid/FirewallRules.js +++ b/www/manager6/grid/FirewallRules.js @@ -629,7 +629,8 @@ Ext.define('PVE.FirewallRules', { // similar to xtype: 'rownumberer', dataIndex: 'pos', resizable: false, - width: 42, + minWidth: 42, + flex: 1, sortable: false, align: 'right', hideable: false, @@ -660,7 +661,8 @@ Ext.define('PVE.FirewallRules', { me.updateRule(data); } }, - width: 50 + minWidth: 50, + flex: 2, }, { header: gettext('Type'), @@ -668,7 +670,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('type', value, metaData, record); }, - width: 50 + minWidth: 50, + flex: 2, }, { header: gettext('Action'), @@ -676,7 +679,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('action', value, metaData, record); }, - width: 80 + minWidth: 80, + flex: 3, }, { header: gettext('Macro'), @@ -684,7 +688,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('macro', value, metaData, record); }, - width: 80 + minWidth: 80, + flex: 3, } ]; @@ -695,7 +700,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('iface', value, metaData, record); }, - width: 80 + minWidth: 80, + flex: 3, }); } @@ -706,7 +712,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('source', value, metaData, record); }, - width: 100 + minWidth: 100, + flex: 4, }, { header: gettext('Destination'), @@ -714,7 +721,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('dest', value, metaData, record); }, - width: 100 + minWidth: 100, + flex: 4, }, { header: gettext('Protocol'), @@ -722,7 +730,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('proto', value, metaData, record); }, - width: 100 + minWidth: 100, + flex: 3, }, { header: gettext('Dest. port'), @@ -730,7 +739,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('dport', value, metaData, record); }, - width: 100 + minWidth: 100, + flex: 4, }, { header: gettext('Source port'), @@ -738,7 +748,8 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('sport', value, metaData, record); }, - width: 100 + minWidth: 100, + flex: 3, }, { header: gettext('Log level'), @@ -746,12 +757,13 @@ Ext.define('PVE.FirewallRules', { renderer: function(value, metaData, record) { return render_errors('log', value, metaData, record); }, - width: 100 + minWidth: 100, + flex: 3, }, { header: gettext('Comment'), dataIndex: 'comment', - flex: 1, + flex: 6, renderer: function(value, metaData, record) { return render_errors('comment', Ext.util.Format.htmlEncode(value), metaData, record); }