Tweak graphics a bit

todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css

@@ -1,6 +1,5 @@
 .boardMainTaskGroups {
 	display: flex;
-	gap: 8px;
 	justify-content: start;
 	flex-wrap: nowrap;
 
@@ -11,6 +10,12 @@
 .boardMainTaskGroups > div {
 	flex-basis: 240px;
 	flex-shrink: 0;
+	flex-grow: 1;
+
+	margin-right: auto;
+	margin-left: auto;
+
+	max-width: 480px;
 }
 
 .boardMainTaskGroups > div > div {
@@ -18,4 +23,7 @@
 	flex-direction: column;
 	gap: 8px;
 	overflow-y: scroll;
+	padding-left: 4px;
+	padding-right: 4px;
+	padding-bottom: 8px;
 }

todoblue/src/app/board/[board]/TaskDisplay.module.css

@@ -1,8 +1,7 @@
 .taskDiv {
 	display: grid;
 	align-items: center;
-	min-width: unset;
+	min-width: 240px;
-	width: 240px;
 	min-height: 44px;
 
 	cursor: pointer;

todoblue/src/app/board/[board]/doTaskSorting.tsx

@@ -1,14 +1,71 @@
 import {TaskWithId} from "@/app/board/[board]/Types"
 import {TaskSortingFunction} from "@/app/board/[board]/useBoardTaskArranger"
 
+/**
+ * **Mapping** from {@link TaskImportance} to a {@link number}.
+ */
+const IMPORTANCE_TO_NUMBER = {
+	"Highest": 5,
+	"High": 4,
+	"Normal": 3,
+	"Low": 2,
+	"Lowest": 1,
+}
+
+/**
+ * **Mapping** from {@link TaskPriority} to a {@link number}.
+ */
+const PRIORITY_TO_NUMBER = {
+	"Highest": 5,
+	"High": 4,
+	"Normal": 3,
+	"Low": 2,
+	"Lowest": 1,
+}
 
 /**
  * **Function** comparing {@link Task}s by their text, following the order proposed by {@link string.localeCompare}.
  * @param a The first task to compare.
  * @param b The second task to compare.
  */
-function compareTasksByText(a: TaskWithId, b: TaskWithId) {return a.text.localeCompare(b.text)}
+function compareText(a: TaskWithId, b: TaskWithId) {return a.text.localeCompare(b.text)}
+
+/**
+ * **Function** comparing {@link Task}s by their {@link TaskPriority}, sorting highest priorities before the lowest.
+ * @param a The first task to compare.
+ * @param b The second task to compare.
+ */
+function comparePriority(a: TaskWithId, b: TaskWithId) {return PRIORITY_TO_NUMBER[b.priority] - PRIORITY_TO_NUMBER[a.priority]}
+
+/**
+ * **Function** comparing {@link Task}s by their {@link TaskImportance}, sorting highest priorities before the lowest.
+ * @param a The first task to compare.
+ * @param b The second task to compare.
+ */
+function compareImportance(a: TaskWithId, b: TaskWithId) {return IMPORTANCE_TO_NUMBER[b.importance] - IMPORTANCE_TO_NUMBER[a.importance]}
+
+function comparePriorityImportanceText(a: TaskWithId, b: TaskWithId) {
+	let diff;
+	diff = comparePriority(a, b)
+	if(diff != 0) return diff;
+	diff = compareImportance(a, b)
+	if(diff != 0) return diff
+	diff = compareText(a, b)
+	return diff
+}
+
+function compareImportancePriorityText(a: TaskWithId, b: TaskWithId) {
+	let diff;
+	diff = compareImportance(a, b)
+	if(diff != 0) return diff
+	diff = comparePriority(a, b)
+	if(diff != 0) return diff;
+	diff = compareText(a, b)
+	return diff
+}
 
 export const TASK_SORTERS: TaskSortingFunction[] = [
-	compareTasksByText,
+	compareText,
+	comparePriorityImportanceText,
+	compareImportancePriorityText,
 ];