From 80df1f2fd5e27fe7d403d9fd298d0ccbcebf8d0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Magimel?= <magimel.francois@gmail.com>
Date: Mon, 10 Aug 2026 19:59:35 +0000
Subject: [PATCH] fix(options): lay Gerrit fields on their own row

The placeholder for the Gerrit review field was so long that it was not
displayed well.
---
 _locales/en/messages.json |  2 +-
 _locales/fr/messages.json |  2 +-
 options/options.css       | 10 ++++++++--
 options/options.html      | 11 +++++++----
 options/options.js        |  4 +---
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b6b6ce7..d535bb1 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -92,7 +92,7 @@
     "description": "Status message when adding or removing a self-hosted instance fails unexpectedly"
   },
   "optionsReviewUrlPlaceholder": {
-    "message": "review.example.com (review server URL)",
+    "message": "https://review.example.com",
     "description": "Placeholder for the review server URL input of a Gerrit instance"
   },
   "optionsInvalidReviewUrl": {
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
index 88b6430..5db9367 100644
--- a/_locales/fr/messages.json
+++ b/_locales/fr/messages.json
@@ -92,7 +92,7 @@
     "description": "Message affiché quand l'ajout ou la suppression d'une instance auto-hébergée échoue de façon inattendue"
   },
   "optionsReviewUrlPlaceholder": {
-    "message": "review.exemple.com (URL du serveur de revue)",
+    "message": "https://review.exemple.com",
     "description": "Texte indicatif du champ d'URL du serveur de revue d'une instance Gerrit"
   },
   "optionsInvalidReviewUrl": {
diff --git a/options/options.css b/options/options.css
index 21ad7b9..9266cf7 100644
--- a/options/options.css
+++ b/options/options.css
@@ -28,8 +28,14 @@ body { background: var(--bg); color: var(--fg); }
   border-top: 1px solid var(--border); padding-top: 0.75rem;
 }
 .options__subtitle { margin: 0; }
-.options__add { display: flex; gap: 0.5rem; align-items: center; }
-.options__add .options__input { flex: 1; }
+.options__add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
+.options__add .options__input { flex: 1; min-width: 8rem; }
+/* the gerrit fields take a whole row of their own: on the shared row they
+   would be squeezed narrower than their placeholders */
+.options__add-gerrit { display: flex; gap: 0.5rem; flex: 1 1 100%; }
+/* this display beats the browser's [hidden] rule (author styles win over the
+   user-agent ones), so restore it for the non-gerrit types */
+.options__add-gerrit[hidden] { display: none; }
 .options__remove, .options__add-btn {
   align-self: flex-start;
   padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 4px;
diff --git a/options/options.html b/options/options.html
index aface77..446a951 100644
--- a/options/options.html
+++ b/options/options.html
@@ -27,10 +27,13 @@ <h4 class="options__subtitle" i18n=1>__MSG_optionsSelfHostedTitle__</h4>
             <select id="instance-type" class="options__input"></select>
             <input id="instance-hostname" class="options__input" type="text"
                    autocomplete="off" spellcheck="false">
-            <!-- gerrit-only fields: the mirror's software and the review server -->
-            <select id="instance-mirror-type" class="options__input" hidden></select>
-            <input id="instance-review-url" class="options__input" type="text"
-                   autocomplete="off" spellcheck="false" hidden>
+            <!-- gerrit-only fields (the mirror's software and the review
+                 server); their own full-width row, so both stay readable -->
+            <div id="gerrit-fields" class="options__add-gerrit" hidden>
+              <select id="instance-mirror-type" class="options__input"></select>
+              <input id="instance-review-url" class="options__input" type="text"
+                     autocomplete="off" spellcheck="false">
+            </div>
             <button type="button" id="add-instance" class="options__add-btn"
                     i18n=1>__MSG_optionsAddInstance__</button>
           </div>
diff --git a/options/options.js b/options/options.js
index d071d7d..16b48fe 100644
--- a/options/options.js
+++ b/options/options.js
@@ -321,9 +321,7 @@ document.getElementById("instance-review-url").placeholder =
 // the mirror-type and review-URL fields only apply to the gerrit type
 const typeSelect = document.getElementById("instance-type")
 function syncGerritFields() {
-    const gerrit = typeSelect.value === "gerrit"
-    document.getElementById("instance-mirror-type").hidden = !gerrit
-    document.getElementById("instance-review-url").hidden = !gerrit
+    document.getElementById("gerrit-fields").hidden = typeSelect.value !== "gerrit"
 }
 typeSelect.addEventListener("change", syncGerritFields)
 syncGerritFields()