From abd4ec58671f3d611c3a4db2b68fc70526d70d5a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 30 Jan 2020 22:49:53 +0300
Subject: [PATCH] Adopt emoji packs and settings tabs to wide screens

---
 src/views/emojiPacks/components/SingleEmojiEditor.vue |  5 ++---
 src/views/emojiPacks/index.vue                        | 11 +++++++++--
 src/views/settings/index.vue                          |  2 +-
 src/views/settings/styles/main.scss                   |  2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index a52a5a67..ef36b5c7 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -161,9 +161,8 @@ export default {
 }
 .emoji-container {
   display: grid;
-  grid-template-columns: 7% 35% 35% 20%;
-  justify-content: space-between;
-  grid-column-gap: 1%;
+  grid-template-columns: 75px auto auto 195px;
+  grid-column-gap: 15px;
   margin-bottom: 10px;
 }
 .emoji-preview-img {
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index c6a2e261..c328d533 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="emoji-packs">
     <h1 class="emoji-packs-header">{{ $t('settings.emojiPacks') }}</h1>
     <div class="button-container">
       <el-button type="primary" @click="reloadEmoji">{{ $t('settings.reloadEmoji') }}</el-button>
@@ -10,7 +10,7 @@
       </el-tooltip>
     </div>
     <div class="line"/>
-    <el-form label-width="200px" class="emoji-packs-form">
+    <el-form label-width="180px" class="emoji-packs-form">
       <el-form-item :label="$t('settings.localPacks')">
         <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
       </el-form-item>
@@ -136,4 +136,11 @@ export default {
     border: 1px solid #eee;
     margin-bottom: 22px;
   }
+
+@media only screen and (min-width: 1824px) {
+  .emoji-packs {
+    max-width: 1824px;
+    margin: auto;
+  }
+}
 </style>
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index d13dbe81..08a1eb9d 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -143,7 +143,7 @@ export default {
   }
   @media only screen and (min-width: 1824px) {
     .settings-container {
-      max-width: 1600px;
+      max-width: 1824px;
       margin: auto;
     }
   }
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 31580800..023bfcca 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -193,7 +193,7 @@
 
   @media only screen and (min-width: 1824px) {
     .submit-button-container {
-      max-width: 1413px;
+      max-width: 1637px;
       margin-left: auto;
       margin-right: auto;
       right: auto;