From e771b49351e91234562849feafabeb51c94c0cf9 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 3 Aug 2023 17:41:24 +0200
Subject: [PATCH] Tweak task group column size

---
 todoblue/src/app/board/[board]/BoardMain.tsx          |  6 +++---
 .../app/board/[board]/BoardMainTaskGroups.module.css  | 11 +++++++++++
 .../src/app/board/[board]/BoardMainTaskGroups.tsx     |  3 ++-
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css

diff --git a/todoblue/src/app/board/[board]/BoardMain.tsx b/todoblue/src/app/board/[board]/BoardMain.tsx
index db38288..928137a 100644
--- a/todoblue/src/app/board/[board]/BoardMain.tsx
+++ b/todoblue/src/app/board/[board]/BoardMain.tsx
@@ -10,13 +10,13 @@ export function BoardMain() {
 
 	switch(websocketState) {
 		case undefined:
-			return <BoardMainIcon icon={<FontAwesomeIcon icon={faGear} spin/>} text={"Caricamento..."}/>
+			return <BoardMainIcon icon={<FontAwesomeIcon size={"4x"} icon={faGear} spin/>} text={"Caricamento..."}/>
 		case WebSocket.CONNECTING:
-			return <BoardMainIcon icon={<FontAwesomeIcon icon={faArrowsSpin} spin/>} text={"Connessione..."}/>
+			return <BoardMainIcon icon={<FontAwesomeIcon size={"4x"} icon={faArrowsSpin} spin/>} text={"Connessione..."}/>
 		case WebSocket.OPEN:
 			return <BoardMainTaskGroups/>
 		case WebSocket.CLOSING:
 		case WebSocket.CLOSED:
-			return <BoardMainIcon icon={<FontAwesomeIcon icon={faExclamationCircle}/>} text={"Errore"} className={"red"}/>
+			return <BoardMainIcon icon={<FontAwesomeIcon size={"4x"} icon={faExclamationCircle}/>} text={"Errore"} className={"red"}/>
 	}
 }
diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css
new file mode 100644
index 0000000..0c40b98
--- /dev/null
+++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css
@@ -0,0 +1,11 @@
+.boardMainTaskGroups {
+	display: flex;
+	gap: 8px;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+.boardMainTaskGroups > div {
+	flex-basis: 240px;
+	flex-shrink: 0;
+}
diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
index 0c386c6..cea6fae 100644
--- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
+++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
@@ -1,12 +1,13 @@
 import {TaskGroupColumn} from "@/app/board/[board]/TaskGroupColumn"
 import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import style from "./BoardMainTaskGroups.module.css"
 
 
 export function BoardMainTaskGroups() {
 	const {taskGroups} = useBoardContext()
 
 	return (
-		<main className={"chapter-5"}>
+		<main className={style.boardMainTaskGroups}>
 			{taskGroups.map((tg) => <TaskGroupColumn taskGroup={tg}/>)}
 		</main>
 	)