From a8651db49c700a62c9977a8bf6eaeca1a7fd6303 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Sat, 20 Jul 2024 19:26:13 +0200
Subject: [PATCH] fix overflow

---
 dist/index.css        | 17 +++++++++++++----
 dist/index.js         |  4 ++--
 src/View/chatPage.css | 22 ++++++++++++++++------
 src/View/chatPage.tsx | 16 +++++++---------
 4 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/dist/index.css b/dist/index.css
index a1520ec2..1b57c8ef 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -206,16 +206,17 @@ main {
   display: flex;
 }
 #chat-page #main {
+  width: calc(100% - var(--ribbon-size));
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
-  flex: 1;
 }
 #chat-page #main > div,
 #chat-page #main .content {
   width: 100%;
   height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 #chat-page #main .content {
   overflow: auto;
@@ -229,10 +230,14 @@ main {
 #chat-page #ribbon {
   width: var(--ribbon-size);
   border-right: 1px solid var(--border);
-  overflow: auto;
   justify-content: space-between;
   padding-bottom: var(--safe-area-bottom);
 }
+#chat-page #ribbon > span {
+  height: 100%;
+  flex: 1;
+  overflow: auto;
+}
 #chat-page #main .toolbar {
   height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
@@ -260,9 +265,13 @@ main {
   width: 100%;
   max-width: var(--control-height);
   height: var(--control-height);
+  min-height: var(--control-height);
   align-items: center;
   justify-content: center;
 }
+#chat-page #ribbon > button {
+  margin-top: var(--gap-between-tiles);
+}
 
 /* src/View/homePage.css */
 #home-page > div {
diff --git a/dist/index.js b/dist/index.js
index 45b4c51b..5f9e8f90 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -953,7 +953,7 @@
           return mainContent.value = MessagePage(chatViewModel);
       }
     });
-    return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "ghost",
@@ -961,7 +961,7 @@
         "on:click": chatViewModel.close
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
-    )), /* @__PURE__ */ createElement("span", null, ChatViewToggleButton(
+    ), /* @__PURE__ */ createElement("span", null, ChatViewToggleButton(
       translations.chatPage.pages.calendar,
       "calendar_month",
       "calendar" /* Calendar */,
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index 2bc04cc8..6cc66e76 100644
--- a/src/View/chatPage.css
+++ b/src/View/chatPage.css
@@ -37,18 +37,19 @@
 }
 
 #chat-page #main {
+  width: calc(100% - var(--ribbon-size));
   display: flex;
   flex-direction: column;
-
-  width: 100%;
-  height: 100%;
-  flex: 1;
 }
 
 #chat-page #main > div,
 #chat-page #main .content {
   width: 100%;
   height: 100%;
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
 }
 
 #chat-page #main .content {
@@ -68,13 +69,17 @@
   width: var(--ribbon-size);
   border-right: 1px solid var(--border);
 
-  overflow: auto;
-
   justify-content: space-between;
 
   padding-bottom: var(--safe-area-bottom);
 }
 
+#chat-page #ribbon > span {
+  height: 100%;
+  flex: 1;
+  overflow: auto;
+}
+
 #chat-page #main .toolbar {
   height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
@@ -110,7 +115,12 @@
   width: 100%;
   max-width: var(--control-height);
   height: var(--control-height);
+  min-height: var(--control-height);
 
   align-items: center;
   justify-content: center;
 }
+
+#chat-page #ribbon > button {
+  margin-top: var(--gap-between-tiles);
+}
diff --git a/src/View/chatPage.tsx b/src/View/chatPage.tsx
index fba89cbc..083d57cc 100644
--- a/src/View/chatPage.tsx
+++ b/src/View/chatPage.tsx
@@ -25,15 +25,13 @@ export function ChatPage(chatViewModel: ChatViewModel) {
     <article id="chat-page" set:color={chatViewModel.color}>
       <div>
         <div id="ribbon">
-          <span>
-            <button
-              class="ghost"
-              aria-label={translations.chatPage.closeChatAudioLabe}
-              on:click={chatViewModel.close}
-            >
-              <span class="icon">close</span>
-            </button>
-          </span>
+          <button
+            class="ghost"
+            aria-label={translations.chatPage.closeChatAudioLabe}
+            on:click={chatViewModel.close}
+          >
+            <span class="icon">close</span>
+          </button>
 
           <span>
             {ChatViewToggleButton(