From 8e820f6ebcbb8bba81c0e9dbb28fdfce7cbbd5a3 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 9 Sep 2019 12:05:35 +0200
Subject: [PATCH] QoL improvement when submitting report

---
 .../src/components/moderation/ReportModal.vue | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index e8a30c512..da2c1bfcb 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -19,19 +19,24 @@
         <translate translate-context="*/Moderation/Popup,Paragraph">Use this form to submit a report to our moderation team.</translate>
       </p>
       <form v-if="canSubmit" id="report-form" class="ui form" @submit.prevent="submit">
-        <div v-if="!$store.state.auth.authenticated" class="ui inline required field">
-          <label for="report-submitter-email">
-            <translate translate-context="Content/*/*/Noun">Email</translate>
-          </label>
-          <input type="email" v-model="submitterEmail" name="report-submitter-email" id="report-submitter-email" required>
+        <div class="fields">
+          <report-category-dropdown
+            class="ui required eight wide field"
+            v-model="category"
+            :required="true"
+            :empty="true"
+            :restrict-to="allowedCategories"
+            :label="true"></report-category-dropdown>
+          <div v-if="!$store.state.auth.authenticated" class="ui eight wide required field">
+            <label for="report-submitter-email">
+              <translate translate-context="Content/*/*/Noun">Email</translate>
+            </label>
+            <input type="email" v-model="submitterEmail" name="report-submitter-email" id="report-submitter-email" required>
+            <p>
+              <translate translate-context="*/*/Field,Help">We'll use this email if we need to contact you regarding this report.</translate>
+            </p>
+          </div>
         </div>
-        <report-category-dropdown
-          class="ui inline required field"
-          v-model="category"
-          :required="true"
-          :empty="true"
-          :restrict-to="allowedCategories"
-          :label="true"></report-category-dropdown>
         <div class="ui field">
           <label for="report-summary">
             <translate translate-context="*/*/Field.Label/Noun">Message</translate>