From 6e67382f12c9065be7a7faac17cda401b5beab77 Mon Sep 17 00:00:00 2001
From: Okke Harsta <oharsta@zilverline.com>
Date: Sun, 1 Oct 2023 15:16:07 +0200
Subject: [PATCH] Mobile styling of RoleCard

---
 client/src/components/RoleCard.scss | 9 +++++++--
 client/src/styles/mixins.scss       | 7 +++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/components/RoleCard.scss b/client/src/components/RoleCard.scss
index 65a8ba4a..6f1c89c4 100644
--- a/client/src/components/RoleCard.scss
+++ b/client/src/components/RoleCard.scss
@@ -56,6 +56,11 @@
 
         .sds--checkbox-container {
             margin-right: 25px;
+
+            @media (max-width: $medium) {
+                margin: 0 0 20px 0;
+            }
+
         }
 
         img.provider, svg.provider {
@@ -66,7 +71,7 @@
             border: 1px solid var(--sds--color--gray--300);
             padding: 16px;
 
-            @media (max-width: 680px) {
+            @media (max-width: $medium) {
                 margin: 0 auto 20px 0;
             }
         }
@@ -79,7 +84,7 @@
                 margin-left: 15px;
             }
 
-            @media (max-width: 680px) {
+            @media (max-width: $medium) {
                 margin: 20px auto 0 0;
             }
 
diff --git a/client/src/styles/mixins.scss b/client/src/styles/mixins.scss
index 43b638e6..f0345334 100644
--- a/client/src/styles/mixins.scss
+++ b/client/src/styles/mixins.scss
@@ -36,6 +36,13 @@
     .input-field, .select-field, .date-field, .sds--checkbox-container{
         margin-top: 20px;
     }
+
+    .sds--checkbox-container {
+        @media (max-width: $medium) {
+            margin-top: 0;
+        }
+
+    }
     .actions {
         grid-column-start: first;
         margin-top: 30px;