From 245d3c44ee86835fbceb345e190706ffa5116f32 Mon Sep 17 00:00:00 2001
From: Stian Sulebak <69514522+stianjsu@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:29:13 +0200
Subject: [PATCH] feat(edit): grid layout for toggle lines (#1110)

---
 .../src/Admin/scenarios/SelectLines/index.tsx | 32 ++++++++++---------
 .../scenarios/SelectLines/styles.module.css   |  5 +++
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/next-tavla/src/Admin/scenarios/SelectLines/index.tsx b/next-tavla/src/Admin/scenarios/SelectLines/index.tsx
index 32fb52feb..b0fc8886e 100644
--- a/next-tavla/src/Admin/scenarios/SelectLines/index.tsx
+++ b/next-tavla/src/Admin/scenarios/SelectLines/index.tsx
@@ -27,21 +27,23 @@ function SelectLines<T extends TStopPlaceTile | TQuayTile>({
     return (
         <div className={classes.lineToggleContainer}>
             <ExpandablePanel title="Velg linjer">
-                {uniqLines.map((line) => (
-                    <div key={line.id}>
-                        <Switch
-                            checked={
-                                tile.whitelistedLines?.includes(line.id) ??
-                                false
-                            }
-                            onChange={() => {
-                                toggleLine(line.id)
-                            }}
-                        >
-                            {line.publicCode} {line.name}
-                        </Switch>
-                    </div>
-                ))}
+                <div className={classes.linesGrid}>
+                    {uniqLines.map((line) => (
+                        <div key={line.id}>
+                            <Switch
+                                checked={
+                                    tile.whitelistedLines?.includes(line.id) ??
+                                    false
+                                }
+                                onChange={() => {
+                                    toggleLine(line.id)
+                                }}
+                            >
+                                {line.publicCode} {line.name}
+                            </Switch>
+                        </div>
+                    ))}
+                </div>
             </ExpandablePanel>
         </div>
     )
diff --git a/next-tavla/src/Admin/scenarios/SelectLines/styles.module.css b/next-tavla/src/Admin/scenarios/SelectLines/styles.module.css
index 2def97224..60e9c9522 100644
--- a/next-tavla/src/Admin/scenarios/SelectLines/styles.module.css
+++ b/next-tavla/src/Admin/scenarios/SelectLines/styles.module.css
@@ -1,3 +1,8 @@
 .lineToggleContainer {
     margin-bottom: 0.5em;
 }
+
+.linesGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
+}