Add mobile UI for single report show page

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')
     },

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>

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,10 +41,12 @@
       </div>
     </header>
     <h4 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h4>
+    <div class="report-card-container">
       <el-card class="report">
         <report-content :report="report"/>
       </el-card>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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>