Render html tags in statuses

src/views/reports/components/Statuses.vue

@@ -3,15 +3,22 @@
     <el-card v-for="status in report.statuses" :key="status.id" class="status-card">
       <div slot="header">
         <div class="status-header">
-          <div class="status-account">
+          <div class="status-account-container">
-            <img :src="status.account.avatar" alt="avatar" class="status-avatar-img">
+            <div class="status-account">
-            <h3 class="status-account-name">{{ status.account.display_name }}</h3>
+              <img :src="status.account.avatar" class="status-avatar-img">
+              <h3 class="status-account-name">{{ status.account.display_name }}</h3>
+            </div>
+            <a :href="status.account.url" target="_blank" class="account">
+              @{{ status.account.acct }}
+            </a>
           </div>
           <div class="status-actions">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
             <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
             <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+              <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
+                {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
+              </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item
                   v-if="!status.sensitive"
@@ -46,12 +53,9 @@
             </el-dropdown>
           </div>
         </div>
-        <a :href="status.account.url" target="_blank" class="account">
-          @{{ status.account.acct }}
-        </a>
       </div>
       <div class="status-body">
-        <span class="status-content">{{ status.content }}</span>
+        <span class="status-content" v-html="status.content"/>
         <a :href="status.url" target="_blank" class="account">
           {{ parseTimestamp(status.created_at) }}
         </a>
@@ -121,6 +125,7 @@ export default {
   }
   .status-account-name {
     margin: 0;
+    height: 22px;
   }
   .status-body {
     display: flex;
@@ -135,6 +140,37 @@ export default {
   .status-header {
     display: flex;
     justify-content: space-between;
-
+  }
+  @media
+  only screen and (max-width: 760px),
+  (min-device-width: 768px) and (max-device-width: 1024px) {
+    .el-message {
+      min-width: 80%;
+    }
+    .el-message-box {
+      width: 80%;
+    }
+    .status-card {
+      .el-card__header {
+        padding: 10px 17px
+      }
+      .el-tag {
+        margin: 3px 4px 3px 0;
+      }
+      .status-account-container {
+        margin-bottom: 5px;
+      }
+      .status-actions-button {
+        margin: 3px 0 3px;
+      }
+      .status-actions {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .status-header {
+        display: flex;
+        flex-direction: column;
+      }
+    }
   }
 </style>

src/views/reports/components/TimelineItem.vue

@@ -2,7 +2,10 @@
   <el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
     <el-card>
       <div class="header-container">
-        <h3 class="report-title">Report on {{ report.account.display_name }}</h3>
+        <div>
+          <h3 class="report-title">Report on {{ report.account.display_name }}</h3>
+          <h5 class="id">ID: {{ report.id }}</h5>
+        </div>
         <div>
           <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
           <el-dropdown trigger="click">
@@ -15,7 +18,6 @@
           </el-dropdown>
         </div>
       </div>
-      <h5 class="id">ID: {{ report.id }}</h5>
       <div>
         <div class="line"/>
         <span class="report-row-key">Account:</span>
@@ -132,11 +134,11 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
-    height: 30px;
+    height: 40px;
   }
   .id {
     color: gray;
-    margin: 0 0 12px;
+    margin-top: 6px;
   }
   .line {
     width: 100%;
@@ -185,8 +187,15 @@ export default {
   @media
   only screen and (max-width: 760px),
   (min-device-width: 768px) and (max-device-width: 1024px) {
-    .confirm-message {
+    .timeline-item-container {
-      width: 98%;
+      .header-container {
+        display: flex;
+        flex-direction: column;
+        height: 80px;
+      }
+      .id {
+        margin: 6px 0 0 0;
+      }
     }
   }
 </style>

src/views/reports/index.vue

@@ -73,10 +73,13 @@ only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
   .reports-container {
     h1 {
-      margin: 7px 10px 7px 10px;
+      margin: 7px 10px 15px 10px;
     }
     .filter-container {
-      margin: 0 10px 7px 10px
+      margin: 0 10px
+    }
+    .timeline {
+      margin: 20px 20px 20px 18px
     }
   }
 }

src/views/users/index.vue

@@ -314,7 +314,7 @@ only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px) {
   .users-container {
     h1 {
-      margin: 7px 10px 7px 10px;
+      margin: 7px 10px 15px 10px;
     }
     .actions-container {
       display: flex;