From 97291f9863180547329128727171e9642fddc4d8 Mon Sep 17 00:00:00 2001
From: Stefan Kalscheuer <stefan@stklcode.de>
Date: Sat, 13 Mar 2021 13:24:41 +0100
Subject: [PATCH] Use CSS flex and full width for totals in dashboard widget
 (#199)

---
 css/dashboard.css      | 18 +++++++-----------
 views/widget-front.php |  2 +-
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/css/dashboard.css b/css/dashboard.css
index e441f2d..a9f395d 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -2,13 +2,13 @@
 
 #statify_chart {
 	color: #a7aaad;
+	flex: 0 0 100%;
 	direction: rtl;
 	height: 140px;
 	margin: 0 -4px;
 	overflow-x: auto;
 	overflow-y: hidden;
 	text-align: center;
-	width: 100%;
 }
 
 #statify_chart_data {
@@ -60,6 +60,8 @@
 }
 
 #statify_dashboard .inside {
+	display: flex;
+	flex-wrap: wrap;
 	height: 1%;
 	margin: 0;
 	padding-bottom: 0;
@@ -80,20 +82,13 @@
 	overflow: hidden;
 }
 
-#statify_dashboard .table.referrer {
-	float: left;
-	width: 45%;
-}
-
+#statify_dashboard .table.referrer,
 #statify_dashboard .table.target {
-	float: right;
-	width: 55%;
+	flex: 1 0 50%;
 }
 
 #statify_dashboard .table.total {
-	clear: both;
-	float: left;
-	width: 45%;
+	flex: 0 0 100%;
 }
 
 #statify_dashboard td {
@@ -118,6 +113,7 @@
 /* @group Back stage */
 
 #statify_dashboard form {
+	flex: 0 0 100%;
 	padding: 18px 0;
 }
 
diff --git a/views/widget-front.php b/views/widget-front.php
index bd9f158..1e750a8 100644
--- a/views/widget-front.php
+++ b/views/widget-front.php
@@ -113,7 +113,7 @@ class_exists( 'Statify' ) || exit;
 	</div>
 <?php } ?>
 
-<form method="post" class="clear">
+<form method="post">
 	<?php wp_nonce_field( 'statify-dashboard-refresh' ); ?>
 	<button class="button button-primary" name="statify-fresh"><?php esc_html_e( 'Refresh', 'statify' ); ?></button>
 </form>