From f0b67729bb30a40bc11e269a332110081a6875ff Mon Sep 17 00:00:00 2001
From: Dan Mo <dmo3@student.monash.edu>
Date: Mon, 2 Nov 2026 19:33:19 +1100
Subject: [PATCH] Report form notes each on their own line

---
 studio-app/src/ReportProblem.jsx  | 6 +++---
 studio-app/src/report-problem.css | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/studio-app/src/ReportProblem.jsx b/studio-app/src/ReportProblem.jsx
index 6dfc1cf..075e545 100644
--- a/studio-app/src/ReportProblem.jsx
+++ b/studio-app/src/ReportProblem.jsx
@@ -102,11 +102,11 @@ function ReportDialog({ account, onClose }) {
           onChange={(event) => edit(setText)(event.target.value)}
         />
       </label>
-      <small className="muted">{t('report.steps')}</small>
-      <small className="muted report-page">
+      <small className="muted report-note">{t('report.steps')}</small>
+      <small className="muted report-note">
         {t(inStory ? 'report.pageStory' : 'report.page', { page })}
       </small>
-      <small className="muted">{t('report.privacy')}</small>
+      <small className="muted report-note">{t('report.privacy')}</small>
       {problem && <p role="alert">{t(problem)}</p>}
       <div className="report-actions">
         <Button disabled={busy} onClick={onClose}>
diff --git a/studio-app/src/report-problem.css b/studio-app/src/report-problem.css
index b396c19..c0ef2d8 100644
--- a/studio-app/src/report-problem.css
+++ b/studio-app/src/report-problem.css
@@ -4,6 +4,8 @@
   gap: 8px;
   margin-top: 12px;
 }
-.report-page {
+.report-note {
+  display: block;
+  margin-top: 6px;
   overflow-wrap: anywhere;
 }