Adopt emoji packs and settings tabs to wide screens

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 {

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>

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;
     }
   }

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;