From 462e59e33072e1018ee45cc0adfd4451c73a2247 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 16 Jun 2018 16:50:18 -0700
Subject: [PATCH] Make modals look sane on phones

---
 resources/assets/styles/components/modal.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/resources/assets/styles/components/modal.css b/resources/assets/styles/components/modal.css
index 5146021eb..9c81e79c1 100644
--- a/resources/assets/styles/components/modal.css
+++ b/resources/assets/styles/components/modal.css
@@ -7,5 +7,14 @@
     @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
     transition: all 250ms ease;
     margin-top: 15%;
+
+    /**
+     * On tiny phone screens make sure there is a margin on the sides and also
+     * center the modal rather than putting it towards the top of the screen.
+     */
+    @screen smx {
+      margin-top: auto;
+      width: 90%;
+    }
   }
 }