Improve layout on narrow (e.g. mobile portrait) screens

static/style.css

@@ -144,7 +144,11 @@ label {
   font-size: 1.5rem;
 }
 .emoji {
-  font-size: 2rem;
+  font-size: clamp(1rem, 5vw, 2rem);
+}
+
+.slider {
+  display: flex;
 }
 
 table.matrix th {

templates/date_vote_form.html

@@ -1,7 +1,7 @@
 {% for d in dates %}
   <div class="vote-item">
     <label for="date_{{d.id}}">{{ d.display or d.date }}</label>
-    <div>
+    <div class="slider">
       <span class="emoji">😞</span>
       <input type="range" name="date_{{d.id}}" value="{{d.preference}}">
       <span class="emoji">😀</span>

templates/place_vote_form.html

@@ -1,7 +1,7 @@
 {% for d in places %}
   <div class="vote-item">
     <label for="place_{{d.id}}">{{ d.name }}</label>
-    <div>
+    <div class="slider">
       <span class="emoji">😞</span>
       <input type="range" name="place_{{d.id}}" value="{{d.preference}}">
       <span class="emoji">😀</span>

templates/time_vote_form.html

@@ -1,7 +1,7 @@
 {% for d in times %}
   <div class="vote-item">
     <label for="time_{{d.id}}">{{ d.display or d.time }}</label>
-    <div>
+    <div class="slider">
       <span class="emoji">😞</span>
       <input type="range" name="time_{{d.id}}" value="{{d.preference}}">
       <span class="emoji">😀</span>