From 5da34c48c6e2052f46b51e602c4213ed9a345920 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Sun, 6 Jul 2025 22:09:09 +0100
Subject: [PATCH] Add max width

---
 ts/routes/deck-options/EasyDaysInput.svelte | 43 ++++++++++++---------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/ts/routes/deck-options/EasyDaysInput.svelte b/ts/routes/deck-options/EasyDaysInput.svelte
index 695b4078f..fb5d9cd2d 100644
--- a/ts/routes/deck-options/EasyDaysInput.svelte
+++ b/ts/routes/deck-options/EasyDaysInput.svelte
@@ -20,31 +20,38 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <Item>
-    <div class="easy-days-settings">
-        <span></span>
-        <span class="header min-col">{tr.deckConfigEasyDaysMinimum()}</span>
-        <span class="header">{tr.deckConfigEasyDaysReduced()}</span>
-        <span class="header normal-col">{tr.deckConfigEasyDaysNormal()}</span>
+    <div class="container">
+        <div class="easy-days-settings">
+            <span></span>
+            <span class="header min-col">{tr.deckConfigEasyDaysMinimum()}</span>
+            <span class="header">{tr.deckConfigEasyDaysReduced()}</span>
+            <span class="header normal-col">{tr.deckConfigEasyDaysNormal()}</span>
 
-        {#each easyDays as day, index}
-            <span class="day">{day}</span>
-            <div class="input-container">
-                <input
-                    type="range"
-                    bind:value={values[index]}
-                    step={0.5}
-                    max={1.0}
-                    min={0.0}
-                    list="easy_day_steplist"
-                />
-            </div>
-        {/each}
+            {#each easyDays as day, index}
+                <span class="day">{day}</span>
+                <div class="input-container">
+                    <input
+                        type="range"
+                        bind:value={values[index]}
+                        step={0.5}
+                        max={1.0}
+                        min={0.0}
+                        list="easy_day_steplist"
+                    />
+                </div>
+            {/each}
+        </div>
     </div>
 </Item>
 
 <style lang="scss">
+    .container {
+        display: flex;
+        justify-content: center;
+    }
     .easy-days-settings {
         width: 100%;
+        max-width: 1000px;
         border-collapse: collapse;
 
         display: grid;