From ac2e4f0b62809d9a3a26e220c0788d0a414f3360 Mon Sep 17 00:00:00 2001
From: "Peter J. Holzer" <hjp@hjp.at>
Date: Tue, 15 Oct 2024 23:49:09 +0200
Subject: [PATCH] Improve layout on narrow (e.g. mobile portrait) screens

---
 static/style.css               | 6 +++++-
 templates/date_vote_form.html  | 2 +-
 templates/place_vote_form.html | 2 +-
 templates/time_vote_form.html  | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/static/style.css b/static/style.css
index a08ae3f..4cd2c57 100644
--- a/static/style.css
+++ b/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 {
diff --git a/templates/date_vote_form.html b/templates/date_vote_form.html
index 36a4792..2f6ab2d 100644
--- a/templates/date_vote_form.html
+++ b/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>
diff --git a/templates/place_vote_form.html b/templates/place_vote_form.html
index 412a417..1b2a831 100644
--- a/templates/place_vote_form.html
+++ b/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>
diff --git a/templates/time_vote_form.html b/templates/time_vote_form.html
index 747f16c..d174601 100644
--- a/templates/time_vote_form.html
+++ b/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>