implement column layout for taskSettingsModal on desktop

dist/index.css

@@ -59,7 +59,7 @@ body[theme=dark] [color]:not([color=standard]).tile {
   [color]:not([color=standard]).background {
     --luma: var(--background-luma);
     --sat: 100%;
-    background: hsl(var(--hue), var(--sat), var(--luma), 40%);
+    background: hsl(var(--hue), var(--sat), var(--luma), 20%);
   }
   body[theme=dark] [color]:not([color=standard]).background {
     --luma: var(--background-luma-dark);
@@ -469,6 +469,20 @@ body[showing-chat] #chat-page-wrapper {
   height: 100%;
   flex: 1;
 }
+.modal.task-settings > div {
+  max-width: 52rem;
+}
+@media (min-width: 640px) {
+  .modal.task-settings .column-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: var(--content-padding);
+  }
+  .modal.task-settings .column-wrapper > .flex-column {
+    width: 100%;
+    flex: 1;
+  }
+}
 
 /* src/View/ChatPages/taskPage.css */
 #chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content {

dist/index.js

@@ -5379,16 +5379,7 @@
       const isSelected = entry[0] == taskViewModel.task.boardId;
       return Option(entry[1], entry[0], isSelected);
     };
-    return /* @__PURE__ */ createElement("div", { class: "modal", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal task-settings", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.taskSettingsHeadline), /* @__PURE__ */ createElement("div", { class: "column-wrapper" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
-      "select",
-      {
-        "bind:value": taskViewModel.selectedVersionId,
-        "children:append": [
-          taskViewModel.versionIds,
-          VersionIdToOption
-        ]
-      }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskViewModel.name,
@@ -5409,7 +5400,7 @@
         rows: "10",
         "bind:value": taskViewModel.description
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
+    )))), /* @__PURE__ */ createElement("hr", { class: "mobile-only" }), /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskViewModel.category,
@@ -5459,7 +5450,16 @@
         type: "time",
         "bind:value": taskViewModel.time
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
+    ))))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.general.fileVersionLabel), /* @__PURE__ */ createElement(
+      "select",
+      {
+        "bind:value": taskViewModel.selectedVersionId,
+        "children:append": [
+          taskViewModel.versionIds,
+          VersionIdToOption
+        ]
+      }
+    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
       coreViewModel2,
       coreViewModel2.translations.chatPage.task.deleteTaskButton,
       "delete_forever",

src/View/Modals/taskSettingsModal.tsx

@@ -25,7 +25,7 @@ export function TaskSettingsModal(
     };
 
     return (
-        <div class="modal" open>
+	<div class="modal task-settings" open>
 	    <div>
 		<main>
 		    <h2>
@@ -35,28 +35,8 @@ export function TaskSettingsModal(
 			}
 		    </h2>
 
-                    <label class="tile flex-no">
+		    <div class="column-wrapper">
-                        <span class="icon">history</span>
+			<div class="flex-column">
-                        <div>
-                            <span>
-                                {
-                                    coreViewModel.translations.general
-                                        .fileVersionLabel
-                                }
-                            </span>
-                            <select
-                                bind:value={taskViewModel.selectedVersionId}
-                                children:append={[
-                                    taskViewModel.versionIds,
-                                    VersionIdToOption,
-                                ]}
-                            ></select>
-                            <span class="icon">arrow_drop_down</span>
-                        </div>
-                    </label>
-
-                    <hr></hr>
-
 			    <label class="tile flex-no">
 				<span class="icon">label</span>
 				<div>
@@ -109,9 +89,11 @@ export function TaskSettingsModal(
 				    ></textarea>
 				</div>
 			    </label>
+			</div>
 
-                    <hr></hr>
+			<hr class="mobile-only"></hr>
 
+			<div class="flex-column">
 			    <label class="tile flex-no">
 				<span class="icon">category</span>
 				<div>
@@ -209,6 +191,30 @@ export function TaskSettingsModal(
 			    ></input>
 			</div>
 		    </label>
+		</div>
+	    </div>
+	    
+	    <hr></hr>
+
+	    <label class="tile flex-no">
+		<span class="icon">history</span>
+		<div>
+		    <span>
+			{
+			    coreViewModel.translations.general
+			    .fileVersionLabel
+			}
+		    </span>
+		    <select
+			bind:value={taskViewModel.selectedVersionId}
+			children:append={[
+			    taskViewModel.versionIds,
+			    VersionIdToOption,
+			]}
+		    ></select>
+		    <span class="icon">arrow_drop_down</span>
+		</div>
+	    </label>
 
 	    <hr></hr>
 

src/View/chatPage.css

@@ -242,3 +242,21 @@ body[showing-chat] #chat-page-wrapper {
     height: 100%;
     flex: 1;
 }
+
+/* task settings */
+.modal.task-settings > div {
+    max-width: 52rem;
+}
+
+@media (min-width: 640px) {
+    .modal.task-settings .column-wrapper {
+	display: flex;
+	flex-direction: row;
+	gap: var(--content-padding);
+    }
+
+    .modal.task-settings .column-wrapper > .flex-column{
+	width: 100%;
+	flex: 1;
+    }
+}