Collapse pin mapping to one column

OpenStickCommunity · Oct 7, 2024 · 0ff5938 · 0ff5938
1 parent 348b054
commit 0ff5938
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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>