From 038d85b1d9e1896e93a3e4a26f600c79ddc33611 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Tue, 11 Feb 2025 17:04:58 +0700
Subject: [PATCH] Further tweaks to easy days

The previous commit added word-wrap, but it was not working after I'd
removed some other tweaks I'd made in testing, that I thought were not
required. I ended up switching to standard table columns and a fixed
layout, so that both the column and row headers will wrap properly.
---
 ts/routes/deck-options/EasyDays.svelte | 39 +++++++++++++++-----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/ts/routes/deck-options/EasyDays.svelte b/ts/routes/deck-options/EasyDays.svelte
index cf55cbcc0..0bcf1c90c 100644
--- a/ts/routes/deck-options/EasyDays.svelte
+++ b/ts/routes/deck-options/EasyDays.svelte
@@ -47,19 +47,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <thead>
                         <tr>
                             <th></th>
-                            <th colspan="3">
-                                <div class="header">
-                                    <span>{tr.deckConfigEasyDaysMinimum()}</span>
-                                    <span>{tr.deckConfigEasyDaysReduced()}</span>
-                                    <span>{tr.deckConfigEasyDaysNormal()}</span>
-                                </div>
+                            <th class="header min-col">
+                                <span>{tr.deckConfigEasyDaysMinimum()}</span>
+                            </th>
+                            <th class="header text-center">
+                                <span>{tr.deckConfigEasyDaysReduced()}</span>
+                            </th>
+                            <th class="header normal-col">
+                                <span>{tr.deckConfigEasyDaysNormal()}</span>
                             </th>
                         </tr>
                     </thead>
                     <tbody>
                         {#each easyDays as day, index}
                             <tr>
-                                <td>{day}</td>
+                                <td class="day">{day}</td>
                                 <td colspan="3">
                                     <input
                                         type="range"
@@ -86,26 +88,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .easy-days-settings table {
         width: 100%;
         border-collapse: collapse;
+        table-layout: fixed;
     }
     .easy-days-settings th,
     .easy-days-settings td {
         padding: 8px;
-        text-align: center;
         border-bottom: var(--border) solid 1px;
     }
     .header {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
         word-wrap: break-word;
         font-size: smaller;
     }
-    .header span:nth-child(1) {
-        text-align: left;
-    }
-    .header span:nth-child(3) {
-        text-align: right;
-    }
     .easy-days-settings input[type="range"] {
         width: 100%;
     }
+
+    .day {
+        word-wrap: break-word;
+        font-size: smaller;
+    }
+
+    .min-col {
+        text-align: start;
+    }
+
+    .normal-col {
+        text-align: end;
+    }
 </style>