From 3daee526349903fb9a379b2c371b8710032053d2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 8 Aug 2021 20:11:23 +0100
Subject: [PATCH] :children_crossing: Improve user experience of config modals

---
 src/components/Settings/ConfigLauncher.vue | 2 +-
 src/styles/global-styles.scss              | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index c9b0f267..64a24d27 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -15,7 +15,7 @@
 
     <!-- Modal for manually changing locale -->
     <modal :name="modalNames.LANG_SWITCHER" classes="dashy-modal"
-      :resizable="true" width="30%" height="25%">
+      :resizable="true" width="35%" height="35%">
       <LanguageSwitcher />
     </modal>
 
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index a5b7c25e..1c3eaf29 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -1,5 +1,6 @@
 
 @import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
 
 /* Essential global page layout styles */
 html {
@@ -26,6 +27,13 @@ html {
   box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary) !important;
   min-width: 350px;
   min-height: 200px;
+
+  @include phone {
+    left: 0.5rem !important;
+    right: 0.5rem !important;
+    width: 95% !important;
+    top: 2rem !important;
+  }
 }
 .vm--overlay {
   background: #00000080;