From c2e80fb063463212d4089e08806ac285629ac7bd Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 2 Dec 2020 22:20:13 +0300
Subject: [PATCH 1/8] Process log message to render links to mentioned users

---
 src/views/moderation_log/LogEntryMessage.vue | 50 ++++++++++++--------
 src/views/moderation_log/UserLink.vue        | 28 +++++++++++
 2 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 src/views/moderation_log/UserLink.vue

diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue
index d19ada81..ede85aa2 100644
--- a/src/views/moderation_log/LogEntryMessage.vue
+++ b/src/views/moderation_log/LogEntryMessage.vue
@@ -1,14 +1,7 @@
 <template>
   <span>
-    <router-link
-      v-if="propertyExists(actor, 'id')"
-      :to="{ name: 'UsersShow', params: { id: actor.id }}"
-      class="router-link">
-      <span v-if="propertyExists(actor, 'nickname')" style="font-weight: 600">
-        @{{ actor.nickname }}
-      </span>
-    </router-link>
-    <span v-if="subject.type === 'report' && propertyExists(subject, 'id')">
+    <component :is="processedHtml"/>
+    <!-- <span v-if="subject.type === 'report' && propertyExists(subject, 'id')">
       {{ logEntryMessageWithoutId[0] }}
       <router-link
         :to="{ name: 'ReportsShow', params: { id: subject.id }}"
@@ -16,12 +9,14 @@
         <span style="font-weight: 600">#{{ subject.id }}</span>
       </router-link>
       {{ logEntryMessageWithoutId[1] }}
-    </span>
-    <span v-else>{{ logEntryMessage }}</span>
+    </span> -->
   </span>
 </template>
 
 <script>
+import UserLink from './UserLink'
+import Vue from 'vue'
+Vue.component('user-link', UserLink)
 
 export default {
   name: 'LogEntryMessage',
@@ -43,16 +38,29 @@ export default {
     }
   },
   computed: {
-    logEntryMessage() {
-      return this.actor.nickname ? this.message.split(this.actor.nickname)[1] : this.message
-    },
-    logEntryMessageWithoutId() {
-      return this.logEntryMessage.split(`#${this.subject.id}`)
-    }
-  },
-  methods: {
-    propertyExists(account, property) {
-      return account[property]
+    // logEntryMessage() {
+    //   if (!this.actor.nickname) {
+    //     return this.message
+    //   } else {
+    //     return this.message.split(this.actor.nickname).length > 2
+    //       ? this.message.split(this.actor.nickname)[1].concat(this.actor.nickname)
+    //       : this.message.split(this.actor.nickname)[1]
+    //   }
+    // },
+    // logEntryMessageWithoutId() {
+    //   return this.logEntryMessage.split(`#${this.subject.id}`)
+    // },
+    processedHtml() {
+      const html = this.message.replace(/\@[\S]+/g, `<user-link :actor="actor"/>`)
+      return {
+        template: '<div>' + html + '</div>',
+        props: {
+          actor: {
+            type: null,
+            default: () => { return this.actor }
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/views/moderation_log/UserLink.vue b/src/views/moderation_log/UserLink.vue
new file mode 100644
index 00000000..11f92128
--- /dev/null
+++ b/src/views/moderation_log/UserLink.vue
@@ -0,0 +1,28 @@
+<template>
+  <router-link
+    v-if="propertyExists(actor, 'id')"
+    :to="{ name: 'UsersShow', params: { id: actor.id }}"
+    class="router-link">
+    <span v-if="propertyExists(actor, 'nickname')" style="font-weight: 600">
+      @{{ actor.nickname }}
+    </span>
+  </router-link>
+</template>
+
+<script>
+
+export default {
+  name: 'UserLink',
+  props: {
+    actor: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    propertyExists(account, property) {
+      return account[property]
+    }
+  }
+}
+</script>

From 7cac1c7159f3cd3aba59a4478b96e42db319690e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 2 Dec 2020 23:42:44 +0300
Subject: [PATCH 2/8] Pass nicknames instead of ids to user links from mod log

---
 src/views/moderation_log/LogEntryMessage.vue | 22 +++++---------------
 src/views/moderation_log/UserLink.vue        | 14 ++++---------
 2 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue
index ede85aa2..cf5ab63e 100644
--- a/src/views/moderation_log/LogEntryMessage.vue
+++ b/src/views/moderation_log/LogEntryMessage.vue
@@ -38,28 +38,16 @@ export default {
     }
   },
   computed: {
-    // logEntryMessage() {
-    //   if (!this.actor.nickname) {
-    //     return this.message
-    //   } else {
-    //     return this.message.split(this.actor.nickname).length > 2
-    //       ? this.message.split(this.actor.nickname)[1].concat(this.actor.nickname)
-    //       : this.message.split(this.actor.nickname)[1]
-    //   }
-    // },
     // logEntryMessageWithoutId() {
     //   return this.logEntryMessage.split(`#${this.subject.id}`)
     // },
     processedHtml() {
-      const html = this.message.replace(/\@[\S]+/g, `<user-link :actor="actor"/>`)
+      const html = [...this.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
+        .reduce((acc, nickname) => {
+          return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
+        }, this.message)
       return {
-        template: '<div>' + html + '</div>',
-        props: {
-          actor: {
-            type: null,
-            default: () => { return this.actor }
-          }
-        }
+        template: '<div>' + html + '</div>'
       }
     }
   }
diff --git a/src/views/moderation_log/UserLink.vue b/src/views/moderation_log/UserLink.vue
index 11f92128..cacfb1b1 100644
--- a/src/views/moderation_log/UserLink.vue
+++ b/src/views/moderation_log/UserLink.vue
@@ -1,10 +1,9 @@
 <template>
   <router-link
-    v-if="propertyExists(actor, 'id')"
-    :to="{ name: 'UsersShow', params: { id: actor.id }}"
+    :to="{ name: 'UsersShow', params: { id: actor }}"
     class="router-link">
-    <span v-if="propertyExists(actor, 'nickname')" style="font-weight: 600">
-      @{{ actor.nickname }}
+    <span style="font-weight: 600;margin-right: -3px;">
+      @{{ actor }}
     </span>
   </router-link>
 </template>
@@ -15,14 +14,9 @@ export default {
   name: 'UserLink',
   props: {
     actor: {
-      type: Object,
+      type: String,
       required: true
     }
-  },
-  methods: {
-    propertyExists(account, property) {
-      return account[property]
-    }
   }
 }
 </script>

From c9e9775eb1bbac4bb3c57d6730a35ff9567e0c8e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 3 Dec 2020 01:49:39 +0300
Subject: [PATCH 3/8] Render links for reports on mod log page

---
 src/views/moderation_log/LogEntryMessage.vue | 23 ++++++++++----------
 src/views/moderation_log/ReportLink.vue      | 20 +++++++++++++++++
 src/views/moderation_log/UserLink.vue        |  4 +---
 3 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 src/views/moderation_log/ReportLink.vue

diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue
index cf5ab63e..b0e3a6e8 100644
--- a/src/views/moderation_log/LogEntryMessage.vue
+++ b/src/views/moderation_log/LogEntryMessage.vue
@@ -1,22 +1,15 @@
 <template>
   <span>
     <component :is="processedHtml"/>
-    <!-- <span v-if="subject.type === 'report' && propertyExists(subject, 'id')">
-      {{ logEntryMessageWithoutId[0] }}
-      <router-link
-        :to="{ name: 'ReportsShow', params: { id: subject.id }}"
-        class="router-link">
-        <span style="font-weight: 600">#{{ subject.id }}</span>
-      </router-link>
-      {{ logEntryMessageWithoutId[1] }}
-    </span> -->
   </span>
 </template>
 
 <script>
+import ReportLink from './ReportLink'
 import UserLink from './UserLink'
 import Vue from 'vue'
 Vue.component('user-link', UserLink)
+Vue.component('report-link', ReportLink)
 
 export default {
   name: 'LogEntryMessage',
@@ -38,14 +31,20 @@ export default {
     }
   },
   computed: {
-    // logEntryMessageWithoutId() {
-    //   return this.logEntryMessage.split(`#${this.subject.id}`)
-    // },
     processedHtml() {
       const html = [...this.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
         .reduce((acc, nickname) => {
           return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
         }, this.message)
+      if (this.subject.type === 'report' && this.subject.id) {
+        const updatedHtml = [...html.matchAll(/\#(?<reportId>([\w]+))/g)].map(res => res.groups.reportId)
+          .reduce((acc, id) => {
+            return acc.replace(`#${id}`, `<report-link id="${id}"/>`)
+          }, html)
+        return {
+          template: '<div>' + updatedHtml + '</div>'
+        }
+      }
       return {
         template: '<div>' + html + '</div>'
       }
diff --git a/src/views/moderation_log/ReportLink.vue b/src/views/moderation_log/ReportLink.vue
new file mode 100644
index 00000000..bfbd210a
--- /dev/null
+++ b/src/views/moderation_log/ReportLink.vue
@@ -0,0 +1,20 @@
+<template>
+  <router-link
+    :to="{ name: 'ReportsShow', params: { id }}"
+    class="router-link">
+    <span style="font-weight: 600">#{{ id }}</span>
+  </router-link>
+</template>
+
+<script>
+
+export default {
+  name: 'UserLink',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/views/moderation_log/UserLink.vue b/src/views/moderation_log/UserLink.vue
index cacfb1b1..77ab82a4 100644
--- a/src/views/moderation_log/UserLink.vue
+++ b/src/views/moderation_log/UserLink.vue
@@ -2,9 +2,7 @@
   <router-link
     :to="{ name: 'UsersShow', params: { id: actor }}"
     class="router-link">
-    <span style="font-weight: 600;margin-right: -3px;">
-      @{{ actor }}
-    </span>
+    <span style="font-weight: 600">@{{ actor }}</span>
   </router-link>
 </template>
 

From 27a4620dba64749e9ec75d2563e17ef64782cd39 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 3 Dec 2020 02:24:56 +0300
Subject: [PATCH 4/8] Remove LogEntryMessage component, move it to Mod Log
 index page

---
 src/views/moderation_log/LogEntryMessage.vue | 60 --------------------
 src/views/moderation_log/index.vue           | 32 +++++++++--
 2 files changed, 28 insertions(+), 64 deletions(-)
 delete mode 100644 src/views/moderation_log/LogEntryMessage.vue

diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue
deleted file mode 100644
index b0e3a6e8..00000000
--- a/src/views/moderation_log/LogEntryMessage.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <span>
-    <component :is="processedHtml"/>
-  </span>
-</template>
-
-<script>
-import ReportLink from './ReportLink'
-import UserLink from './UserLink'
-import Vue from 'vue'
-Vue.component('user-link', UserLink)
-Vue.component('report-link', ReportLink)
-
-export default {
-  name: 'LogEntryMessage',
-  props: {
-    actor: {
-      type: Object,
-      required: true
-    },
-    message: {
-      type: String,
-      required: true
-    },
-    subject: {
-      type: [Object, Array],
-      required: false,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  computed: {
-    processedHtml() {
-      const html = [...this.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
-        .reduce((acc, nickname) => {
-          return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
-        }, this.message)
-      if (this.subject.type === 'report' && this.subject.id) {
-        const updatedHtml = [...html.matchAll(/\#(?<reportId>([\w]+))/g)].map(res => res.groups.reportId)
-          .reduce((acc, id) => {
-            return acc.replace(`#${id}`, `<report-link id="${id}"/>`)
-          }, html)
-        return {
-          template: '<div>' + updatedHtml + '</div>'
-        }
-      }
-      return {
-        template: '<div>' + html + '</div>'
-      }
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
- .router-link {
-    text-decoration: none;
-  }
-</style>
diff --git a/src/views/moderation_log/index.vue b/src/views/moderation_log/index.vue
index 283bf4d2..c8c350c4 100644
--- a/src/views/moderation_log/index.vue
+++ b/src/views/moderation_log/index.vue
@@ -43,8 +43,7 @@
         v-for="(logEntry, index) in log"
         :key="index"
         :timestamp="normalizeTimestamp(logEntry.time)">
-        <log-entry-message v-if="propertyExists(logEntry.data.actor, 'nickname')" :actor="logEntry.data.actor" :message="logEntry.message" :subject="logEntry.data.subject"/>
-        <span v-else>{{ logEntry.message }}</span>
+        <component :is="processedMessage(logEntry)"/>
       </el-timeline-item>
     </el-timeline>
     <div class="pagination">
@@ -65,10 +64,14 @@ import moment from 'moment'
 import _ from 'lodash'
 import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
-import LogEntryMessage from './LogEntryMessage'
+import ReportLink from './ReportLink'
+import UserLink from './UserLink'
+import Vue from 'vue'
+Vue.component('user-link', UserLink)
+Vue.component('report-link', ReportLink)
 
 export default {
-  components: { RebootButton, LogEntryMessage },
+  components: { RebootButton },
   data() {
     return {
       dateRange: '',
@@ -130,6 +133,24 @@ export default {
     normalizeTimestamp(timestamp) {
       return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm')
     },
+    processedMessage(logEntry) {
+      const html = [...logEntry.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
+        .reduce((acc, nickname) => {
+          return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
+        }, logEntry.message)
+      if (this.propertyExists(logEntry.data, 'subject') && logEntry.data.subject.type === 'report') {
+        const updatedHtml = [...html.matchAll(/\#(?<reportId>([\w]+))/g)].map(res => res.groups.reportId)
+          .reduce((acc, id) => {
+            return acc.replace(`#${id}`, `<report-link id="${id}"/>`)
+          }, html)
+        return {
+          template: '<div>' + updatedHtml + '</div>'
+        }
+      }
+      return {
+        template: '<div>' + html + '</div>'
+      }
+    },
     propertyExists(account, property) {
       return account[property]
     }
@@ -173,6 +194,9 @@ h1 {
   margin: 0;
   width: 145px;
 }
+.router-link {
+  text-decoration: none;
+}
 .search-container {
   text-align: right;
 }

From 9913909cfa235eccb4764de679712c53fa605f5b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 3 Dec 2020 23:23:20 +0300
Subject: [PATCH 5/8] Fix loading single report page

---
 src/store/modules/reports.js | 8 ++++++--
 src/views/reports/show.vue   | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index c42fa894..2589daa4 100644
--- a/src/store/modules/reports.js
+++ b/src/store/modules/reports.js
@@ -12,6 +12,7 @@ const reports = {
     currentPage: 1,
     fetchedReports: [],
     loading: true,
+    loadingSingleReport: true,
     openReportsCount: 0,
     pageSize: 50,
     singleReport: {},
@@ -42,6 +43,9 @@ const reports = {
     },
     SET_SINGLE_REPORT: (state, report) => {
       state.singleReport = report
+    },
+    SET_SINGLE_REPORT_LOADING: (state, status) => {
+      state.loadingSingleReport = status
     }
   },
   actions: {
@@ -162,11 +166,11 @@ const reports = {
       commit('SET_LOADING', false)
     },
     async FetchSingleReport({ commit, getters }, id) {
-      commit('SET_LOADING', true)
+      commit('SET_SINGLE_REPORT_LOADING', true)
       const { data } = await fetchSingleReport(id, getters.authHost, getters.token)
 
       commit('SET_SINGLE_REPORT', data)
-      commit('SET_LOADING', false)
+      commit('SET_SINGLE_REPORT_LOADING', false)
     },
     async FetchOpenReportsCount({ commit, getters, state }) {
       commit('SET_LOADING', true)
diff --git a/src/views/reports/show.vue b/src/views/reports/show.vue
index 5f30f376..8a023b00 100644
--- a/src/views/reports/show.vue
+++ b/src/views/reports/show.vue
@@ -47,7 +47,7 @@ export default {
   components: { ModerateUserDropdown, RebootButton, ReportContent },
   computed: {
     loading() {
-      return this.$store.state.reports.loading
+      return this.$store.state.reports.loadingSingleReport
     },
     report() {
       return this.$store.state.reports.singleReport

From c1dfdd3bbe48b3dd3a3d592a486774f079a3567b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 4 Dec 2020 01:37:56 +0300
Subject: [PATCH 6/8] Add mobile UI for single report show page

---
 .../components/ModerateUserDropdown.vue       |  5 +-
 .../reports/components/ReportContent.vue      | 11 +++
 src/views/reports/show.vue                    | 71 ++++++++++++++++---
 3 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/src/views/reports/components/ModerateUserDropdown.vue b/src/views/reports/components/ModerateUserDropdown.vue
index 3d5618f1..6c93ca82 100644
--- a/src/views/reports/components/ModerateUserDropdown.vue
+++ b/src/views/reports/components/ModerateUserDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dropdown :hide-on-click="false" trigger="click">
-    <el-button :disabled="!account.id" :size="renderedFrom === 'showPage' ? 'medium' : 'small'" plain icon="el-icon-files">
+    <el-button :disabled="!account.id" :size="renderedFrom === 'showPage' && !isMobile ? 'medium' : 'small'" plain icon="el-icon-files">
       {{ $t('reports.moderateUser') }}
       <i class="el-icon-arrow-down el-icon--right"/>
     </el-button>
@@ -87,6 +87,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     tagPolicyEnabled() {
       return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
     },
diff --git a/src/views/reports/components/ReportContent.vue b/src/views/reports/components/ReportContent.vue
index 030fc93e..639e1cc7 100644
--- a/src/views/reports/components/ReportContent.vue
+++ b/src/views/reports/components/ReportContent.vue
@@ -179,4 +179,15 @@ export default {
   .router-link {
     text-decoration: none;
   }
+  @media only screen and (max-width:480px) {
+    .divider {
+      margin: 10px 0;
+    }
+    .el-card__body {
+      padding: 13px;
+    }
+    .report-account {
+      flex-direction: column;
+    }
+  }
 </style>
diff --git a/src/views/reports/show.vue b/src/views/reports/show.vue
index 8a023b00..72a9debe 100644
--- a/src/views/reports/show.vue
+++ b/src/views/reports/show.vue
@@ -4,7 +4,11 @@
       <div class="report-page-header">
         <div v-if="propertyExists(report.account, 'nickname')" class="avatar-name-container">
           <h1 >{{ $t('reports.reportOn') }}</h1>
-          <el-avatar v-if="propertyExists(report.account, 'avatar')" :src="report.account.avatar" size="large" class="report-page-avatar"/>
+          <el-avatar
+            v-if="propertyExists(report.account, 'avatar')"
+            :src="report.account.avatar"
+            :size="isMobile ? 'small' : 'large'"
+            class="report-page-avatar"/>
           <h1>{{ report.account.nickname }}</h1>
           <a v-if="propertyExists(report.account, 'url')" :href="report.account.url" target="_blank">
             <i :title="$t('userProfile.openAccountInInstance')" class="el-icon-top-right"/>
@@ -12,10 +16,16 @@
         </div>
         <h1 v-else>{{ $t('reports.report') }}</h1>
       </div>
-      <div>
+      <div class="report-actions-container">
         <el-tag :type="getStateType(report.state)" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
         <el-dropdown trigger="click">
-          <el-button plain icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+          <el-button
+            :size="isMobile ? 'small' : 'medium'"
+            plain
+            icon="el-icon-edit"
+            class="report-actions-button">
+            {{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/>
+          </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
             <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
@@ -31,9 +41,11 @@
       </div>
     </header>
     <h4 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h4>
-    <el-card class="report">
-      <report-content :report="report"/>
-    </el-card>
+    <div class="report-card-container">
+      <el-card class="report">
+        <report-content :report="report"/>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -46,6 +58,9 @@ export default {
   name: 'ReportsShow',
   components: { ModerateUserDropdown, RebootButton, ReportContent },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
       return this.$store.state.reports.loadingSingleReport
     },
@@ -94,11 +109,19 @@ export default {
     margin: 0 15px 22px 15px;
   }
   .report {
-    width: 1000px;
+    max-width: 1000px;
     margin: auto;
   }
   .report-actions-button {
-    margin: 3px 0 6px;
+    margin: 0 5px;
+  }
+  .report-actions-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .report-card-container {
+    margin: auto;
+    padding: 0 15px;
   }
   .report-page-header {
     display: flex;
@@ -139,4 +162,36 @@ export default {
     font-size: 14px;
   }
 }
+@media only screen and (max-width:480px) {
+  .report-show-page-container {
+    .id {
+      margin: 7px 15px 15px 15px;
+    }
+    .report-actions-button {
+      margin: 0 3px 6px;
+    }
+    .report-page-header-container {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .report-page-header {
+      h1 {
+        font-size: 24px;
+      }
+      .avatar-name-container {
+        .el-icon-top-right {
+          font-size: 24px;
+        }
+      }
+      .report-page-avatar {
+        margin: 0 5px 0 9px;
+      }
+    }
+    .report-tag {
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+    }
+  }
+}
 </style>

From b82ee6ff0b5499b16ccd4372639fe88d94c93343 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 4 Dec 2020 01:54:21 +0300
Subject: [PATCH 7/8] Tablet UI for report show page

---
 src/views/reports/show.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/views/reports/show.vue b/src/views/reports/show.vue
index 72a9debe..b62efe3b 100644
--- a/src/views/reports/show.vue
+++ b/src/views/reports/show.vue
@@ -162,7 +162,7 @@ export default {
     font-size: 14px;
   }
 }
-@media only screen and (max-width:480px) {
+@media only screen and (max-width:801px) {
   .report-show-page-container {
     .id {
       margin: 7px 15px 15px 15px;
@@ -187,11 +187,13 @@ export default {
         margin: 0 5px 0 9px;
       }
     }
-    .report-tag {
-      height: 32px;
-      line-height: 32px;
-      font-size: 14px;
-    }
+  }
+}
+@media only screen and (max-width:480px) {
+  .report-tag {
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
   }
 }
 </style>

From ffe03e0d386e56c15626907146ab252dee665d9d Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 4 Dec 2020 02:02:52 +0300
Subject: [PATCH 8/8] Update Changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb1790cc..d7a6de16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,12 +14,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add Unconfimed filter for Users table
 - Filter users by actor type: Person, Bot or Application
 - Add ability to configure Media Preview Proxy, User Backup and Websocket based federation settings
-
+- Mobile and Tablet UI for Single Report show page
 ### Changed
 
 - Hide Tag actions on Users tab if MRF TagPolicy is disabled. Add ability to enable TagPolicy from Moderation menu
 - Move `:restrict_unauthenticated` settings from Authentication tab to Instance tab
 - Replace regular inputs with textareas for setting welcome messages in the Settings section
+- Update rendering Moderation Log Messages so that all usernames are links to the pages of the corresponding users in Admin-FE
 
 ### Fixed