From 6f1530c30507401148dbd24431eb8cdaea910740 Mon Sep 17 00:00:00 2001
From: Felix Sargent <felix.sargent@gmail.com>
Date: Wed, 12 Jun 2024 11:26:44 -0700
Subject: [PATCH] Better handling of mobile.

---
 src/routes/+page.svelte | 13 +++++++------
 static/style.css        | 31 ++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e49e737..2eb600b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -45,8 +45,9 @@
                 </h3>
               </div>
               {#each election.contests as contest}
-                <div class="race">
-                  <a href="{base}/report/{election.path}/{contest.office}">
+              <div class="race">
+                <a href="{base}/report/{election.path}/{contest.office}">
+                  <div class="race-content">
                     <div class="title">
                       <strong>{contest.officeName}</strong>
                       {#each contest.winners as winner, i}
@@ -54,11 +55,11 @@
                       {/each}
                     </div>
                     <div class="meta">
-                      <strong>{contest.numCandidates}</strong>
-                      candidates
+                      <strong>{contest.numCandidates}</strong> candidates
                     </div>
-                  </a>
-                </div>
+                  </div>
+                </a>
+              </div>
               {/each}
             {/each}
           </div>
diff --git a/static/style.css b/static/style.css
index 82eb2fa..cfe90e8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -143,21 +143,40 @@ h3 strong {
   flex: 1;
 }
 
+.race {
+  margin-bottom: 1rem;
+}
+
 .race a {
-  display: flex;
+  display: block;
   color: #555555;
+  text-decoration: none;
   padding: 0.3125rem; /* 5px to rem */
   margin: 0 -0.3125rem; /* 5px to rem */
-  text-decoration: none;
 }
 
 .race a:hover {
   background: #eee;
 }
 
+.race-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.title {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.meta {
+  white-space: nowrap;
+}
+
 .race a .meta {
   text-align: right;
-  flex: 1;
+  flex-shrink: 0;
 }
 
 .race a .title strong {
@@ -168,3 +187,9 @@ hr {
   border: none;
   border-bottom: 1px dotted #ddd;
 }
+
+@media (max-width: 767px) {
+  .title .winner {
+    display: block;
+  }
+}
\ No newline at end of file