From f4e52c5bf785074f28d94ad7ba36888b6a3f5a93 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Thu, 10 Dec 2020 10:32:05 -0500
Subject: [PATCH 1/6] Fix layout issues on dashboard screen

---
 src/assets/css/dashboard.css | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 48e6fe807e..61c8b18b24 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -246,20 +246,12 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @media all and (min-width: 70em) {
     .dashboardSections {
-        -webkit-flex-wrap: wrap;
         flex-wrap: wrap;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: row;
         flex-direction: row;
     }
 
     .dashboardColumn-2-60 {
-        width: 46%;
-    }
-
-    .dashboardColumn-2-40 {
-        width: 27%;
+        flex-grow: 2;
     }
 
     .dashboardSection {
@@ -291,6 +283,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .activeSession {
+    min-width: 10rem;
     width: 100% !important;
 }
 

From 0d2ede01b3a20120f2da8407e8bb311028d3c4e8 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Thu, 10 Dec 2020 10:43:02 -0500
Subject: [PATCH 2/6] Fix margin for stacked emby-button elements

---
 src/controllers/dashboard/dashboard.html | 4 ++--
 src/elements/emby-button/emby-button.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/controllers/dashboard/dashboard.html b/src/controllers/dashboard/dashboard.html
index 58f0480c57..a1fb68c2bc 100644
--- a/src/controllers/dashboard/dashboard.html
+++ b/src/controllers/dashboard/dashboard.html
@@ -16,10 +16,10 @@
                     </div>
 
                     <div style="margin-top:1em;">
-                        <button is="emby-button" type="button" class="raised btnRefresh">
+                        <button is="emby-button" type="button" class="raised btnRefresh" style="margin-left: 0;">
                             <span>${ButtonScanAllLibraries}</span>
                         </button>
-                        <button is="emby-button" type="button" id="btnRestartServer" class="raised hide" onclick="DashboardPage.restart(this);" style="margin-left:0;">
+                        <button is="emby-button" type="button" id="btnRestartServer" class="raised hide" onclick="DashboardPage.restart(this);">
                             <span>${Restart}</span>
                         </button>
                         <button is="emby-button" type="button" id="btnShutdown" class="raised" onclick="DashboardPage.shutdown(this);">
diff --git a/src/elements/emby-button/emby-button.css b/src/elements/emby-button/emby-button.css
index 0963125652..c4df43301e 100644
--- a/src/elements/emby-button/emby-button.css
+++ b/src/elements/emby-button/emby-button.css
@@ -3,7 +3,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    margin: 0 0.3em;
+    margin: 0.3em;
     text-align: center;
     font-size: inherit;
     font-family: inherit;

From d346f185e438f3a29ef0ead8279a06b79fb3c696 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Sat, 12 Dec 2020 02:23:12 -0500
Subject: [PATCH 3/6] Fix additional issues with session cards

---
 src/assets/css/dashboard.css | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 61c8b18b24..3c987d3442 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -127,8 +127,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionAppInfo img {
-    max-width: 40px;
-    max-height: 40px;
+    max-width: 2.25rem;
+    max-height: 2.25rem;
     margin-right: 8px;
 }
 
@@ -287,6 +287,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     width: 100% !important;
 }
 
+.activeSession .cardBox {
+    margin: 0;
+}
+
 .activitylogUserPhoto {
     height: 1.71em;
     width: 1.71em;
@@ -297,15 +301,9 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-position: center;
 }
 
-@media all and (min-width: 40em) {
-    .activeSession {
-        width: 100% !important;
-    }
-}
-
 @media all and (min-width: 50em) {
     .activeSession {
-        width: 50% !important;
+        flex: 1;
     }
 }
 
@@ -318,6 +316,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionAppInfo {
+    flex-grow: 1;
     padding: 0.5em;
     overflow: hidden;
 }
@@ -337,6 +336,8 @@ div[data-role=controlgroup] a.ui-btn-active {
     right: 0;
     bottom: 0;
     font-weight: 400;
+    display: flex;
+    flex-direction: column;
 }
 
 .sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
@@ -351,9 +352,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .sessionNowPlayingDetails {
     display: flex;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
+    white-space: nowrap;
 }
 
 .sessionNowPlayingInfo {
@@ -380,6 +379,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     background: transparent !important;
 }
 
+.activeDevices {
+    gap: 1rem;
+}
+
 .activeSession .playbackProgress,
 .activeSession .transcodingProgress {
     position: absolute;

From 1738010ae4f4d1561a76d7fcf96499ec1c029765 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Mon, 14 Dec 2020 10:11:54 -0500
Subject: [PATCH 4/6] Fix additional issues on dashboard page

---
 src/assets/css/dashboard.css             | 24 +++++++++++++-----------
 src/controllers/dashboard/dashboard.html |  4 ++--
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 3c987d3442..95bb6e0294 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -127,8 +127,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionAppInfo img {
-    max-width: 2.25rem;
-    max-height: 2.25rem;
+    max-width: 40px;
+    max-height: 40px;
     margin-right: 8px;
 }
 
@@ -204,6 +204,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     flex-grow: 1;
 }
 
+.dashboardActionsContainer {
+    margin: 1em -0.3em 0;
+}
+
 .sessionNowPlayingContent {
     -webkit-background-size: cover;
     background-size: cover;
@@ -283,14 +287,10 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .activeSession {
-    min-width: 10rem;
+    min-width: 15rem;
     width: 100% !important;
 }
 
-.activeSession .cardBox {
-    margin: 0;
-}
-
 .activitylogUserPhoto {
     height: 1.71em;
     width: 1.71em;
@@ -303,7 +303,9 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @media all and (min-width: 50em) {
     .activeSession {
-        flex: 1;
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 50%;
     }
 }
 
@@ -352,7 +354,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .sessionNowPlayingDetails {
     display: flex;
-    white-space: nowrap;
 }
 
 .sessionNowPlayingInfo {
@@ -379,8 +380,9 @@ div[data-role=controlgroup] a.ui-btn-active {
     background: transparent !important;
 }
 
-.activeDevices {
-    gap: 1rem;
+.activeDevices.itemsContainer {
+    /* offset for cardBox margin */
+    margin: -0.6em;
 }
 
 .activeSession .playbackProgress,
diff --git a/src/controllers/dashboard/dashboard.html b/src/controllers/dashboard/dashboard.html
index a1fb68c2bc..423cfa4c69 100644
--- a/src/controllers/dashboard/dashboard.html
+++ b/src/controllers/dashboard/dashboard.html
@@ -15,8 +15,8 @@
                         <p id="architecture"></p>
                     </div>
 
-                    <div style="margin-top:1em;">
-                        <button is="emby-button" type="button" class="raised btnRefresh" style="margin-left: 0;">
+                    <div class="dashboardActionsContainer">
+                        <button is="emby-button" type="button" class="raised btnRefresh">
                             <span>${ButtonScanAllLibraries}</span>
                         </button>
                         <button is="emby-button" type="button" id="btnRestartServer" class="raised hide" onclick="DashboardPage.restart(this);">

From e7234792128e85f7fa22fd69f000dfa1d6e5d6ba Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Wed, 16 Dec 2020 16:34:46 -0500
Subject: [PATCH 5/6] Add max-width for session cards

---
 src/assets/css/dashboard.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 95bb6e0294..1ed56ab932 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -127,8 +127,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionAppInfo img {
-    max-width: 40px;
-    max-height: 40px;
+    max-width: 2.5em;
+    max-height: 2.5em;
     margin-right: 8px;
 }
 
@@ -303,6 +303,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @media all and (min-width: 50em) {
     .activeSession {
+        max-width: 25rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 50%;

From 0ae720a1a8b6482e4fad665f53667a6c72a023b9 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Sun, 20 Dec 2020 00:55:58 -0500
Subject: [PATCH 6/6] Update min-width for active session cards

---
 src/assets/css/dashboard.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index 1ed56ab932..35d50d1251 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -287,7 +287,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .activeSession {
-    min-width: 15rem;
+    min-width: 20rem;
     width: 100% !important;
 }