change layout styles, move BoardPage to separate file

dist/index.css

@@ -238,9 +238,9 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #ribbon,
 #chat-page > div > #main,
 #chat-page > div > #main > div,
-#chat-page > div > #main > div > .pane,
+#chat-page > div > #main > div > .pane-wrapper > .pane,
-#chat-page > div > #main > div > .pane > .toolbar,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
-#chat-page > div > #main > div > .pane > .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   display: flex;
 }
 #chat-page > div {
@@ -254,33 +254,35 @@ body[showing-chat] #chat-page-wrapper {
   scroll-snap-type: x mandatory;
 }
 #chat-page #main > div,
-#chat-page > div > #main > div > .pane,
+#chat-page > div > #main > div > .pane-wrapper,
-#chat-page > div > #main > div > .pane > .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   width: 100%;
   height: 100%;
   flex: 1;
 }
-#chat-page > div > #main > div > .pane {
+#chat-page > div > #main > div > .pane-wrapper,
+#chat-page > div > #main > div > .pane-wrapper > .pane {
   flex-direction: column;
   scroll-snap-align: center;
   min-width: 100%;
 }
-#chat-page > div > #main > div > .pane:not(.side),
+#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
-#chat-page > div > #main > div > .pane:not(.side) .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
   animation: slide-up var(--animation-duration);
 }
 @media (min-width: 1024px) {
-  #chat-page > div > #main > div > .pane {
+  #chat-page > div > #main > div > .pane-wrapper {
     min-width: unset;
   }
-  #chat-page > div > #main > div > .pane.side {
+  #chat-page > div > #main > div > .pane-wrapper.side {
     max-width: 18rem;
   }
 }
-#chat-page > div > #main > div > .pane:not(:last-child) {
+#chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
   border-right: 1px solid var(--border);
 }
-#chat-page > div > #main > div > .pane > .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   flex-direction: column;
   overflow: auto;
   padding: var(--content-padding);
@@ -291,11 +293,11 @@ body[showing-chat] #chat-page-wrapper {
   flex-direction: column;
 }
 #chat-page > div > #ribbon,
-#chat-page > div > #main > div > .pane > .toolbar {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   align-items: center;
 }
 #chat-page #ribbon > span,
-#chat-page > div > #main > div > .pane > .toolbar {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -319,7 +321,7 @@ body[showing-chat] #chat-page-wrapper {
   flex-direction: column;
 }
 #chat-page > div > #ribbon button,
-#chat-page > div > #main > div > .pane > .toolbar button {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
   padding: 0px;
   width: 100%;
   max-width: var(--control-height);
@@ -329,18 +331,18 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
 }
 #chat-page > div > #ribbon button.ribbon-button > .icon,
-#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button > .icon {
   font-size: 1.1rem;
 }
 #chat-page > div > #ribbon > span {
   width: 100%;
 }
-#chat-page > div > #main > div > .pane > .toolbar {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
   overflow-y: hidden;
@@ -348,10 +350,10 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
   border-top: 1px solid var(--border);
 }
-#chat-page > div > #main > div > .pane > .toolbar > span {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
   padding-left: var(--content-padding);
 }
-#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
   height: 100%;
   flex: 1;
 }

dist/index.js

@@ -1820,7 +1820,7 @@
       scrollDownIfApplicable
     );
     setTimeout(() => scrollDown(), 100);
-    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": messagePageViewModel.composingMessage,
@@ -1836,7 +1836,7 @@
         "toggle:disabled": messagePageViewModel.cannotSendMessage
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
-    )))))));
+    ))))))));
   }
 
   // src/View/Components/dangerousActionButton.tsx
@@ -1894,7 +1894,7 @@
         settingsPageViewModel.removeSecondaryChannel(secondaryChannel);
       });
     };
-    return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": settingsPageViewModel.primaryChannelInput,
@@ -1981,7 +1981,7 @@
       translations.chatPage.settings.deleteChatButton,
       "chat_error",
       settingsPageViewModel.remove
-    )))));
+    ))))));
   }
 
   // src/View/Components/boardEntry.tsx
@@ -2003,6 +2003,11 @@
     return BoardEntry(boardViewModel);
   };
 
+  // src/View/ChatPages/boardPage.tsx
+  function BoardPage(boardViewModel) {
+    return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" }));
+  }
+
   // src/View/ChatPages/taskPage.tsx
   function TaskPage(taskPageViewModel) {
     taskPageViewModel.loadData();
@@ -2012,14 +2017,14 @@
         const selectedBoard = taskPageViewModel.selectedBoard.value;
         if (selectedBoard == void 0) {
           return [
-            /* @__PURE__ */ createElement("div", { class: "content align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.task.noBoardSelected))
+            /* @__PURE__ */ createElement("div", { class: "pane align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.task.noBoardSelected))
           ];
         } else {
-          return [/* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" })];
+          return BoardPage(selectedBoard);
         }
       }
     );
-    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { "set:color": taskPageViewModel.chatViewModel.displayedColor, class: "pane side background" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskPageViewModel.newBoardNameInput,
@@ -2045,7 +2050,7 @@
           BoardInfoToEntry
         ]
       }
-    ))), /* @__PURE__ */ createElement("div", { class: "pane", "children:set": paneContent }));
+    )))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent }));
   }
 
   // src/View/chatPage.tsx

src/View/ChatPages/boardPage.tsx

@@ -0,0 +1,10 @@
+import * as React from "bloatless-react";
+
+import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
+
+export function BoardPage(boardViewModel: BoardViewModel) {
+  return <div class="pane">
+    <div class="toolbar"></div>
+    <div class="content"></div>
+  </div>;
+}

src/View/ChatPages/messagePage.tsx

@@ -37,32 +37,34 @@ export function MessagePage(messagePageViewModel: MessagePageViewModel) {
 
   return (
     <div id="message-page">
-      <div class="pane">
+      <div class="pane-wrapper">
-        <div class="toolbar">
+        <div class="pane">
-          <span>{translations.chatPage.message.messagesHeadline}</span>
+          <div class="toolbar">
-        </div>
+            <span>{translations.chatPage.message.messagesHeadline}</span>
-        <div class="content">
+          </div>
-          {messageContainer}
+          <div class="content">
-          <div id="composer">
+            {messageContainer}
-            <div class="content-width-constraint">
+            <div id="composer">
-              <div class="input-width-constraint">
+              <div class="content-width-constraint">
-                <input
+                <div class="input-width-constraint">
-                  bind:value={messagePageViewModel.composingMessage}
+                  <input
-                  on:enter={messagePageViewModel.sendMessage}
+                    bind:value={messagePageViewModel.composingMessage}
-                  placeholder={
+                    on:enter={messagePageViewModel.sendMessage}
-                    translations.chatPage.message.composerInputPlaceholder
+                    placeholder={
-                  }
+                      translations.chatPage.message.composerInputPlaceholder
-                ></input>
+                    }
-                <button
+                  ></input>
-                  class="primary"
+                  <button
-                  aria-label={
+                    class="primary"
-                    translations.chatPage.message.sendMessageButtonAudioLabel
+                    aria-label={
-                  }
+                      translations.chatPage.message.sendMessageButtonAudioLabel
-                  on:click={messagePageViewModel.sendMessage}
+                    }
-                  toggle:disabled={messagePageViewModel.cannotSendMessage}
+                    on:click={messagePageViewModel.sendMessage}
-                >
+                    toggle:disabled={messagePageViewModel.cannotSendMessage}
-                  <span class="icon">send</span>
+                  >
-                </button>
+                    <span class="icon">send</span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/View/ChatPages/settingsPage.tsx

@@ -19,137 +19,145 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
 
   return (
     <div id="settings-page">
-      <div class="pane">
+      <div class="pane-wrapper">
-        <div class="toolbar">
+        <div class="pane">
-          <span>{translations.chatPage.settings.settingsHeadline}</span>
+          <div class="toolbar">
-        </div>
+            <span>{translations.chatPage.settings.settingsHeadline}</span>
-        <div class="content">
+          </div>
-          <label class="tile flex-no">
+          <div class="content">
-            <span class="icon">forum</span>
+            <label class="tile flex-no">
-            <div>
+              <span class="icon">forum</span>
-              <span>{translations.chatPage.settings.primaryChannelLabel}</span>
+              <div>
-              <input
+                <span>
-                bind:value={settingsPageViewModel.primaryChannelInput}
+                  {translations.chatPage.settings.primaryChannelLabel}
-                on:enter={settingsPageViewModel.setPrimaryChannel}
+                </span>
-              ></input>
+                <input
+                  bind:value={settingsPageViewModel.primaryChannelInput}
+                  on:enter={settingsPageViewModel.setPrimaryChannel}
+                ></input>
+              </div>
+            </label>
+            <div class="flex-row justify-end width-input">
+              <button
+                class="width-50"
+                aria-label={
+                  translations.chatPage.settings
+                    .setPrimaryChannelButtonAudioLabel
+                }
+                on:click={settingsPageViewModel.setPrimaryChannel}
+                toggle:disabled={settingsPageViewModel.cannotSetPrimaryChannel}
+              >
+                {translations.general.setButton}
+                <span class="icon">check</span>
+              </button>
             </div>
-          </label>
-          <div class="flex-row justify-end width-input">
-            <button
-              class="width-50"
-              aria-label={
-                translations.chatPage.settings.setPrimaryChannelButtonAudioLabel
-              }
-              on:click={settingsPageViewModel.setPrimaryChannel}
-              toggle:disabled={settingsPageViewModel.cannotSetPrimaryChannel}
-            >
-              {translations.general.setButton}
-              <span class="icon">check</span>
-            </button>
-          </div>
 
-          <hr></hr>
+            <hr></hr>
 
-          <div class="flex-row width-input margin-bottom">
+            <div class="flex-row width-input margin-bottom">
-            <input
-              aria-label={
-                translations.chatPage.settings.newSecondaryChannelAudioLabel
-              }
-              placeholder={
-                translations.chatPage.settings.newSecondaryChannelPlaceholder
-              }
-              bind:value={settingsPageViewModel.newSecondaryChannelInput}
-              on:enter={settingsPageViewModel.addSecondaryChannel}
-            ></input>
-            <button
-              class="primary"
-              aria-label={
-                translations.chatPage.settings
-                  .addSecondaryChannelButtonAudioLabel
-              }
-              on:click={settingsPageViewModel.addSecondaryChannel}
-              toggle:disabled={settingsPageViewModel.cannotAddSecondaryChannel}
-            >
-              <span class="icon">add</span>
-            </button>
-          </div>
-
-          <div
-            class="flex-column gap width-input"
-            children:append={[
-              settingsPageViewModel.secondaryChannels,
-              secondaryChannelConverter,
-            ]}
-          ></div>
-
-          <hr></hr>
-
-          <label class="tile flex-no">
-            <span class="icon">key</span>
-            <div>
-              <span>{translations.chatPage.settings.encryptionKeyLabel}</span>
               <input
-                bind:value={settingsPageViewModel.encryptionKeyInput}
+                aria-label={
-                on:enter={settingsPageViewModel.setEncryptionKey}
+                  translations.chatPage.settings.newSecondaryChannelAudioLabel
-                set:type={settingsPageViewModel.encryptionKeyInputType}
+                }
+                placeholder={
+                  translations.chatPage.settings.newSecondaryChannelPlaceholder
+                }
+                bind:value={settingsPageViewModel.newSecondaryChannelInput}
+                on:enter={settingsPageViewModel.addSecondaryChannel}
               ></input>
+              <button
+                class="primary"
+                aria-label={
+                  translations.chatPage.settings
+                    .addSecondaryChannelButtonAudioLabel
+                }
+                on:click={settingsPageViewModel.addSecondaryChannel}
+                toggle:disabled={
+                  settingsPageViewModel.cannotAddSecondaryChannel
+                }
+              >
+                <span class="icon">add</span>
+              </button>
             </div>
-          </label>
-          <div class="flex-row justify-end width-input">
-            <button
-              class="width-50"
-              aria-label={
-                translations.chatPage.settings.setEncryptionKeyButtonAudioLabel
-              }
-              on:click={settingsPageViewModel.setEncryptionKey}
-              toggle:disabled={settingsPageViewModel.cannotSetEncryptionKey}
-            >
-              {translations.general.setButton}
-              <span class="icon">check</span>
-            </button>
-          </div>
 
-          <label class="inline">
+            <div
-            <input
+              class="flex-column gap width-input"
-              type="checkbox"
+              children:append={[
-              bind:checked={settingsPageViewModel.shouldShowEncryptionKey}
+                settingsPageViewModel.secondaryChannels,
-            ></input>
+                secondaryChannelConverter,
-            {translations.chatPage.settings.showEncryptionKey}
+              ]}
-          </label>
+            ></div>
 
-          <hr></hr>
+            <hr></hr>
 
-          <div class="flex-row gap width-input">
+            <label class="tile flex-no">
-            {...Object.values(Color).map((color) => {
+              <span class="icon">key</span>
-              const isSelected = React.createProxyState(
+              <div>
-                [settingsPageViewModel.color],
+                <span>{translations.chatPage.settings.encryptionKeyLabel}</span>
-                () => settingsPageViewModel.color.value == color
+                <input
-              );
+                  bind:value={settingsPageViewModel.encryptionKeyInput}
+                  on:enter={settingsPageViewModel.setEncryptionKey}
+                  set:type={settingsPageViewModel.encryptionKeyInputType}
+                ></input>
+              </div>
+            </label>
+            <div class="flex-row justify-end width-input">
+              <button
+                class="width-50"
+                aria-label={
+                  translations.chatPage.settings
+                    .setEncryptionKeyButtonAudioLabel
+                }
+                on:click={settingsPageViewModel.setEncryptionKey}
+                toggle:disabled={settingsPageViewModel.cannotSetEncryptionKey}
+              >
+                {translations.general.setButton}
+                <span class="icon">check</span>
+              </button>
+            </div>
 
-              function setColor() {
+            <label class="inline">
-                settingsPageViewModel.setColor(color);
+              <input
-              }
+                type="checkbox"
+                bind:checked={settingsPageViewModel.shouldShowEncryptionKey}
+              ></input>
+              {translations.chatPage.settings.showEncryptionKey}
+            </label>
 
-              return (
+            <hr></hr>
-                <button
-                  color={color}
-                  class="fill-color width-100 flex"
-                  style="height: 2rem"
-                  toggle:selected={isSelected}
-                  on:click={setColor}
-                ></button>
-              );
-            })}
-          </div>
 
-          <hr></hr>
+            <div class="flex-row gap width-input">
+              {...Object.values(Color).map((color) => {
+                const isSelected = React.createProxyState(
+                  [settingsPageViewModel.color],
+                  () => settingsPageViewModel.color.value == color
+                );
 
-          <div class="width-input">
+                function setColor() {
-            {DangerousActionButton(
+                  settingsPageViewModel.setColor(color);
-              translations.chatPage.settings.deleteChatButton,
+                }
-              "chat_error",
+
-              settingsPageViewModel.remove
+                return (
-            )}
+                  <button
+                    color={color}
+                    class="fill-color width-100 flex"
+                    style="height: 2rem"
+                    toggle:selected={isSelected}
+                    on:click={setColor}
+                  ></button>
+                );
+              })}
+            </div>
+
+            <hr></hr>
+
+            <div class="width-input">
+              {DangerousActionButton(
+                translations.chatPage.settings.deleteChatButton,
+                "chat_error",
+                settingsPageViewModel.remove
+              )}
+            </div>
           </div>
         </div>
       </div>

src/View/ChatPages/taskPage.tsx

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
 import { BoardInfoToEntry } from "../Components/boardEntry";
+import { BoardPage } from "./boardPage";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import { translations } from "../translations";
 
@@ -13,53 +14,55 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
       const selectedBoard = taskPageViewModel.selectedBoard.value;
       if (selectedBoard == undefined) {
         return [
-          <div class="content align-center justify-center">
+          <div class="pane align-center justify-center">
             <span class="secondary">
               {translations.chatPage.task.noBoardSelected}
             </span>
           </div>,
         ];
       } else {
-        return [<div class="toolbar"></div>, <div class="content"></div>];
+        return BoardPage(selectedBoard);
       }
     }
   );
 
   return (
     <div id="task-page">
-      <div class="pane side">
+      <div class="pane-wrapper side">
-        <div class="toolbar">
+        <div class="pane">
-          <div class="flex-row width-input">
+          <div class="toolbar">
-            <input
+            <div class="flex-row width-input">
-              bind:value={taskPageViewModel.newBoardNameInput}
+              <input
-              on:enter={taskPageViewModel.createBoard}
+                bind:value={taskPageViewModel.newBoardNameInput}
-              placeholder={translations.chatPage.task.newBoardNamePlaceholder}
+                on:enter={taskPageViewModel.createBoard}
-            ></input>
+                placeholder={translations.chatPage.task.newBoardNamePlaceholder}
-            <button
+              ></input>
-              class="primary"
+              <button
-              aria-label={
+                class="primary"
-                translations.chatPage.task.createBoardButtonAudioLabel
+                aria-label={
-              }
+                  translations.chatPage.task.createBoardButtonAudioLabel
-              on:click={taskPageViewModel.createBoard}
+                }
-              toggle:disabled={taskPageViewModel.cannotCreateBoard}
+                on:click={taskPageViewModel.createBoard}
-            >
+                toggle:disabled={taskPageViewModel.cannotCreateBoard}
-              <span class="icon">add</span>
+              >
-            </button>
+                <span class="icon">add</span>
+              </button>
+            </div>
+          </div>
+          <div class="content">
+            <div
+              class="grid gap"
+              style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
+              children:append={[
+                taskPageViewModel.boardViewModels,
+                BoardInfoToEntry,
+              ]}
+            ></div>
           </div>
-        </div>
-        <div class="content">
-          <div
-            class="grid gap"
-            style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
-            children:append={[
-              taskPageViewModel.boardViewModels,
-              BoardInfoToEntry,
-            ]}
-          ></div>
         </div>
       </div>
 
-      <div class="pane" children:set={paneContent}></div>
+      <div class="pane-wrapper" children:set={paneContent}></div>
     </div>
   );
 }

src/View/chatPage.css

@@ -30,9 +30,9 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #ribbon,
 #chat-page > div > #main,
 #chat-page > div > #main > div,
-#chat-page > div > #main > div > .pane,
+#chat-page > div > #main > div > .pane-wrapper > .pane,
-#chat-page > div > #main > div > .pane > .toolbar,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
-#chat-page > div > #main > div > .pane > .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   display: flex;
 }
 
@@ -50,40 +50,42 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page #main > div,
-#chat-page > div > #main > div > .pane,
+#chat-page > div > #main > div > .pane-wrapper,
-#chat-page > div > #main > div > .pane > .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane,
+#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   width: 100%;
   height: 100%;
   flex: 1;
 }
 
-#chat-page > div > #main > div > .pane {
+#chat-page > div > #main > div > .pane-wrapper,
+#chat-page > div > #main > div > .pane-wrapper > .pane {
   flex-direction: column;
   scroll-snap-align: center;
 
   min-width: 100%;
 }
 
-#chat-page > div > #main > div > .pane:not(.side),
+#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
-#chat-page > div > #main > div > .pane:not(.side) .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
   animation: slide-up var(--animation-duration);
 }
 
 @media (min-width: 1024px) {
-  #chat-page > div > #main > div > .pane {
+  #chat-page > div > #main > div > .pane-wrapper {
     min-width: unset;
   }
 
-  #chat-page > div > #main > div > .pane.side {
+  #chat-page > div > #main > div > .pane-wrapper.side {
     max-width: 18rem;
   }
 }
 
-#chat-page > div > #main > div > .pane:not(:last-child) {
+#chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
   border-right: 1px solid var(--border);
 }
 
-#chat-page > div > #main > div > .pane > .content {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
   flex-direction: column;
   overflow: auto;
   padding: var(--content-padding);
@@ -97,12 +99,12 @@ body[showing-chat] #chat-page-wrapper {
 
 /* ribbon, toolbar */
 #chat-page > div > #ribbon,
-#chat-page > div > #main > div > .pane > .toolbar {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   align-items: center;
 }
 
 #chat-page #ribbon > span,
-#chat-page > div > #main > div > .pane > .toolbar {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -135,7 +137,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page > div > #ribbon button,
-#chat-page > div > #main > div > .pane > .toolbar button {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
   padding: 0px;
 
   width: 100%;
@@ -148,13 +150,28 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button {
+#chat-page
+  > div
+  > #main
+  > div
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  button.ribbon-button {
   min-height: unset;
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
 }
 
 #chat-page > div > #ribbon button.ribbon-button > .icon,
-#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon {
+#chat-page
+  > div
+  > #main
+  > div
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  button.ribbon-button
+  > .icon {
   font-size: 1.1rem;
 }
 
@@ -162,7 +179,7 @@ body[showing-chat] #chat-page-wrapper {
   width: 100%;
 }
 
-#chat-page > div > #main > div > .pane > .toolbar {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
   height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
 
@@ -173,11 +190,18 @@ body[showing-chat] #chat-page-wrapper {
   border-top: 1px solid var(--border);
 }
 
-#chat-page > div > #main > div > .pane > .toolbar > span {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
   padding-left: var(--content-padding);
 }
 
-#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) {
+#chat-page
+  > div
+  > #main
+  > div
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  :is(input, select, button) {
   height: 100%;
   flex: 1;
 }