Tablet UI

src/views/emojiPacks/components/EmojiPack.vue

 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form v-if="isLocal" :label-width="isDesktop ? '120px' : '90px'" label-position="left" size="small" class="emoji-pack-metadata">
+    <el-form v-if="isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" />
       </el-form-item>
@@ -38,7 +38,7 @@
         </el-link>
       </div>
     </div>
-    <el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
+    <el-form v-if="!isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" disabled />
       </el-form-item>
@@ -106,7 +106,6 @@ import SingleEmojiEditor from './SingleEmojiEditor.vue'
 import NewEmojiUploader from './NewEmojiUploader.vue'
 
 export default {
-
   components: { SingleEmojiEditor, NewEmojiUploader },
   props: {
     name: {
@@ -137,6 +136,21 @@ export default {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '90px'
+      } else if (this.isTablet) {
+        return '120px'
+      } else {
+        return '120px'
+      }
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -296,6 +310,12 @@ export default {
     width: 100%;
     margin: 0 0 22px 0;
   }
+  .remote-pack-metadata {
+    .el-form-item__content {
+      line-height: 24px;
+      margin-top: 4px;
+    }
+  }
   .save-pack-button {
     width: 54%;
   }

src/views/emojiPacks/components/NewEmojiUploader.vue

 <template>
-  <el-form :label-position="isDesktop ? 'left' : 'top'" label-width="130px" size="small" class="new-emoji-uploader-form">
+  <el-form :label-position="isMobile ? 'top' : 'left'" label-width="130px" size="small" class="new-emoji-uploader-form">
     <el-form-item :label="$t('emoji.shortcode')">
       <el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
     </el-form-item>

src/views/emojiPacks/components/SingleEmojiEditor.vue

 <template>
   <div>
-    <div v-if="isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
+    <div v-if="isLocal" :class="isMobile ? 'emoji-container-flex' : 'emoji-container-grid'">
       <img
         :src="addressOfEmojiInPack(host, packName, file)"
         class="emoji-preview-img">
@@ -8,11 +8,11 @@
       <el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
       <div class="emoji-buttons">
         <el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
-        <el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
+        <el-button class="remove-emoji-button" @click="remove">{{ $t('emoji.remove') }}</el-button>
       </div>
     </div>
 
-    <div v-if="!isLocal" :class="isDesktop ? 'emoji-container-grid' : 'emoji-container-flex'">
+    <div v-if="!isLocal" :class="isMobile ? 'emoji-container-flex' : 'remote-emoji-container-grid'">
       <img
         :src="addressOfEmojiInPack(remoteInstance, packName, file)"
         class="emoji-preview-img">
@@ -166,7 +166,7 @@ export default {
 }
 .emoji-container-grid {
   display: grid;
-  grid-template-columns: 75px auto auto 195px;
+  grid-template-columns: 75px auto auto 200px;
   grid-column-gap: 15px;
   margin-bottom: 10px;
 }
@@ -183,6 +183,12 @@ export default {
 .copy-pack-select {
   width: 100%;
 }
+.remote-emoji-container-grid {
+  display: grid;
+  grid-template-columns: 75px auto auto 160px;
+  grid-column-gap: 15px;
+  margin-bottom: 10px;
+}
 @media only screen and (max-width:480px) {
   .emoji-container-flex {
     display: flex;
@@ -209,4 +215,18 @@ export default {
     }
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .emoji-container-grid {
+    grid-column-gap: 10px;
+  }
+  .emoji-buttons {
+    .el-button+.el-button {
+      margin-left: 5px;
+    }
+  }
+  .remote-emoji-container-grid {
+    grid-column-gap: 10px;
+  }
+}
 </style>

src/views/emojiPacks/index.vue

@@ -78,7 +78,7 @@ export default {
       if (this.isMobile) {
         return '105px'
       } else if (this.isTablet) {
-        return '200px'
+        return '180px'
       } else {
         return '240px'
       }