From 0ff5938ee81e26edcbc6045aee1ecb1c125c2b48 Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Tue, 8 Oct 2024 00:32:35 +0200
Subject: [PATCH] Collapse pin mapping to one column

---
 www/src/Pages/PinMapping.scss | 7 +++++++
 www/src/Pages/PinMapping.tsx  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/www/src/Pages/PinMapping.scss b/www/src/Pages/PinMapping.scss
index 7de724164..b1697e993 100644
--- a/www/src/Pages/PinMapping.scss
+++ b/www/src/Pages/PinMapping.scss
@@ -4,3 +4,10 @@
 	grid-template-columns: 1fr 1fr;
 	grid-template-rows: repeat(15, auto);
 }
+
+@media only screen and (max-width: 680px) {
+	.pin-grid {
+		display: flex;
+		flex-direction: column;
+	}
+}
diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
index 15beddddc..e8a0867c3 100644
--- a/www/src/Pages/PinMapping.tsx
+++ b/www/src/Pages/PinMapping.tsx
@@ -231,7 +231,7 @@ const PinSelectList = memo(function PinSelectList({
 		[buttonNames],
 	);
 	return Object.entries(pins).map(([pin, pinData], index) => (
-		<div key={`select-${index}`} className="d-flex col align-items-center">
+		<div key={`select-${index}`} className="d-flex align-items-center">
 			<div className="d-flex flex-shrink-0" style={{ width: '4rem' }}>
 				<label>{pin.toUpperCase()}</label>
 			</div>