From 3d8e9c8b09172ebc9e28211dbce1d3ab2761f1a4 Mon Sep 17 00:00:00 2001
From: Jelger Haanstra <jghaanstra@gmail.com>
Date: Wed, 15 Dec 2021 11:42:49 +0100
Subject: [PATCH] Fix mobile card details for Modern Dark theme

---
 client/components/boards/boardColors.styl | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl
index 399ef9e1d..2cf5dfcbb 100644
--- a/client/components/boards/boardColors.styl
+++ b/client/components/boards/boardColors.styl
@@ -956,17 +956,24 @@ setBoardClear(color1,color2)
 
   /* Card Details */
   .card-details
-    position: absolute
-    top: 30px
-    left: calc(50% - 384px)
-    width: 768px
-    max-height: calc(100% - 60px)
     background-color: #454545
     color: #cccccc
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
     border: 1px solid #111111
     z-index: 100 !important
 
+  @media screen and (max-width: 800px)
+    .card-details
+      width: 98%
+
+  @media screen and (min-width: 801px)
+    .card-details
+      position: absolute
+      top: 30px
+      left: calc(50% - 384px)
+      width: 768px
+      max-height: calc(100% - 60px)
+
   .card-details
     scrollbar-width: thin
     scrollbar-color: #343434 #999999