Re: [pve-devel] [PATCH manager] ui: FirewallRules.js: fix #3049 wider rule number column

[Aaron Lauterer <a.lauterer@proxmox.com>]

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);
  		}