From d2107a71017895194025d166f9d710cc2a810c79 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 19 Aug 2020 02:56:05 +0300
Subject: [PATCH] Fix mobile UI

---
 src/views/settings/components/Relays.vue | 14 ++++++++++----
 src/views/settings/styles/main.scss      |  3 ++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/settings/components/Relays.vue b/src/views/settings/components/Relays.vue
index e65b152c..4ac29042 100644
--- a/src/views/settings/components/Relays.vue
+++ b/src/views/settings/components/Relays.vue
@@ -10,14 +10,14 @@
         prop="actor"/>
       <el-table-column
         :label="$t('settings.followedBack')"
+        :width="getLabelWidth"
         prop="followed_back"
-        width="120"
         align="center">
         <template slot-scope="scope">
           <i :class="scope.row.followed_back ? 'el-icon-check' : 'el-icon-minus'"/>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('table.actions')" fixed="right" width="120" align="center">
+      <el-table-column :label="$t('table.actions')" :width="getLabelWidth" fixed="right" align="center">
         <template slot-scope="scope">
           <el-button
             type="text"
@@ -40,11 +40,17 @@ export default {
     }
   },
   computed: {
-    relays() {
-      return this.$store.state.relays.fetchedRelays
+    getLabelWidth() {
+      return this.isDesktop ? '130px' : '85px'
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
     },
     loading() {
       return this.$store.state.relays.loading
+    },
+    relays() {
+      return this.$store.state.relays.fetchedRelays
     }
   },
   mounted() {
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 4cecb962..551e99e5 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -431,7 +431,7 @@
       height: 2px;
     }
     .follow-relay {
-      width: 70%;
+      width: 75%;
       margin-right: 5px;
       input {
         width: 100%;
@@ -440,6 +440,7 @@
     .follow-relay-container {
       display: flex;
       justify-content: space-between;
+      margin: 0 5px;
     }
     h1 {
       font-size: 24px;