From 9274a4bed8d9f81d5d00d314741842fb99470588 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Wed, 2 Mar 2022 04:38:08 +0100
Subject: [PATCH] Improve responsiveness

---
 ui/src/routes/surveys/[sid]/live.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/src/routes/surveys/[sid]/live.svelte b/ui/src/routes/surveys/[sid]/live.svelte
index 1c3311a..cb43ea3 100644
--- a/ui/src/routes/surveys/[sid]/live.svelte
+++ b/ui/src/routes/surveys/[sid]/live.svelte
@@ -162,7 +162,7 @@
         <a href="surveys/{survey.id}/admin" class="btn btn-primary ms-1 float-end" title="Aller à l'interface d'administration"><i class="bi bi-pencil"></i></a>
         <a href="surveys/{survey.id}/responses" class="btn btn-success ms-1 float-end" title="Voir les réponses"><i class="bi bi-files"></i></a>
     {/if}
-    <div class="d-flex align-items-center mb-5">
+    <div class="d-flex align-items-center mb-3 mb-md-4 mb-lg-5">
         <h2>
             <a href="surveys/" class="text-muted" style="text-decoration: none">&lt;</a>
             {survey.title}
@@ -219,18 +219,29 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="offset-md-1 col-md-10 offset-lg-2 col-lg-8 offset-xl-3 col-xl-6">
+                    <div class="offset-md-1 col-md-10 offset-lg-2 col-lg-8 offset-xl-3 col-xl-6 mb-4">
+                        <div class="input-group">
                         <textarea
                             id="askquestion"
                             class="form-control"
                             bind:value={myQuestion}
                             autofocus
-                            placeholder="Remarques, soucis, choses pas claires ? Demandez !"
+                            placeholder="Remarques, soucis, choses pas claires ? Demandez !"
                         ></textarea>
+                        <button
+                            class="d-sm-none btn btn-primary"
+                            disabled={!myQuestion || submitQuestionInProgress}
+                        >
+                            {#if submitQuestionInProgress}
+                                <div class="spinner-border spinner-border-sm me-1" role="status"></div>
+                            {/if}
+                            Poser cette question
+                        </button>
+                        </div>
                     </div>
                 </div>
                 {#if myQuestion}
-                    <div class="text-center mt-2">
+                    <div class="d-none d-sm-block text-center mb-4">
                         <button
                             class="btn btn-primary"
                             disabled={submitQuestionInProgress}