From f9a7d55d1461da33231e0c2f7d76f1e9d19ee968 Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Mon, 5 Jul 2021 12:55:39 +0200
Subject: [PATCH] ui: dc/guests: avoid using <br> for layouting

use a flex box with centered columns instead, that needs adding a div
per row, but that's IMO actually making it more clear what a row is
anyway.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/manager6/dc/Guests.js | 86 +++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/www/manager6/dc/Guests.js b/www/manager6/dc/Guests.js
index df233b6d..c17843e1 100644
--- a/www/manager6/dc/Guests.js
+++ b/www/manager6/dc/Guests.js
@@ -32,31 +32,40 @@ Ext.define('PVE.dc.Guests', {
 		stopped: 0,
 		template: 0,
 	    },
+	    cls: 'centered-flex-column',
 	    tpl: [
 		'<h3>' + gettext("Virtual Machines") + '</h3>',
-		'<div class="left-aligned">',
-		    '<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
-		    gettext('Running'),
+		'<div>',
+		    '<div class="left-aligned">',
+			'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
+			gettext('Running'),
+		    '</div>',
+		    '<div class="right-aligned">{running}</div>',
 		'</div>',
-		'<div class="right-aligned">{running}</div><br />',
 		'<tpl if="paused &gt; 0">',
-		    '<div class="left-aligned">',
-			'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
-			gettext('Paused'),
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
+			    gettext('Paused'),
+			'</div>',
+			'<div class="right-aligned">{paused}</div>',
 		    '</div>',
-		    '<div class="right-aligned">{paused}</div><br />',
 		'</tpl>',
-		'<div class="left-aligned">',
-		    '<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
-		    gettext('Stopped'),
-		'</div>',
-		'<div class="right-aligned">{stopped}</div><br />',
-		'<tpl if="template &gt; 0">',
+		'<div>',
 		    '<div class="left-aligned">',
-			'<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
-			gettext('Templates'),
+			'<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
+			gettext('Stopped'),
+		    '</div>',
+		    '<div class="right-aligned">{stopped}</div>',
+		'</div>',
+		'<tpl if="template &gt; 0">',
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
+			    gettext('Templates'),
+			'</div>',
+			'<div class="right-aligned">{template}</div>',
 		    '</div>',
-		    '<div class="right-aligned">{template}</div>',
 		'</tpl>',
 	    ],
 	},
@@ -68,31 +77,40 @@ Ext.define('PVE.dc.Guests', {
 		stopped: 0,
 		template: 0,
 	    },
+	    cls: 'centered-flex-column',
 	    tpl: [
 		'<h3>' + gettext("LXC Container") + '</h3>',
-		'<div class="left-aligned">',
-		    '<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
-		    gettext('Running'),
+		'<div>',
+		    '<div class="left-aligned">',
+			'<i class="good fa fa-fw fa-play-circle">&nbsp;</i>',
+			gettext('Running'),
+		    '</div>',
+		    '<div class="right-aligned">{running}</div>',
 		'</div>',
-		'<div class="right-aligned">{running}</div><br />',
 		'<tpl if="paused &gt; 0">',
-		    '<div class="left-aligned">',
-			'<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
-			gettext('Paused'),
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="warning fa fa-fw fa-pause-circle">&nbsp;</i>',
+			    gettext('Paused'),
+			'</div>',
+			'<div class="right-aligned">{paused}</div>',
 		    '</div>',
-		    '<div class="right-aligned">{paused}</div><br />',
 		'</tpl>',
-		'<div class="left-aligned">',
-		    '<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
-		    gettext('Stopped'),
-		'</div>',
-		'<div class="right-aligned">{stopped}</div><br />',
-		'<tpl if="template &gt; 0">',
+		'<div>',
 		    '<div class="left-aligned">',
-			'<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
-			gettext('Templates'),
+			'<i class="faded fa fa-fw fa-stop-circle">&nbsp;</i>',
+			gettext('Stopped'),
+		    '</div>',
+		    '<div class="right-aligned">{stopped}</div>',
+		'</div>',
+		'<tpl if="template &gt; 0">',
+		    '<div>',
+			'<div class="left-aligned">',
+			    '<i class="fa fa-fw fa-circle-o">&nbsp;</i>',
+			    gettext('Templates'),
+			'</div>',
+			'<div class="right-aligned">{template}</div>',
 		    '</div>',
-		    '<div class="right-aligned">{template}</div>',
 		'</tpl>',
 	    ],
 	},