improve homepage layout

dist/index.css

@@ -15,6 +15,18 @@
   min-width: 100%;
   scroll-snap-align: center;
 }
+@media (max-width: 640px) {
+  #home-page > div {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+  }
+  #home-page > div > div {
+    height: 100%;
+    overflow: scroll;
+    padding: var(--content-padding);
+  }
+}
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;

dist/index.js

@@ -274,7 +274,9 @@
       overviewHeadline: "Overview",
       statusHeadline: "Status",
       settingsButton: "Settings",
+      scrollToChatButton: "Chats",
       ///
+      backToOverviewAudioLabel: "go back to overview",
       chatsHeadline: "Chats",
       addChatAudioLabel: "name of new chat",
       addChatPlaceholder: "Add chat",
@@ -293,7 +295,8 @@
 
   // src/View/homePage.tsx
   function HomePage() {
-    return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", null, translations.homePage.appName)), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("h3", null, translations.homePage.statusHeadline))), /* @__PURE__ */ createElement("button", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), /* @__PURE__ */ createElement("div", null, translations.homePage.settingsButton))), /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+    const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.statusHeadline))), /* @__PURE__ */ createElement("button", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), /* @__PURE__ */ createElement("div", null, translations.homePage.settingsButton)), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
+    const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
         placeholder: translations.homePage.addChatPlaceholder,
@@ -306,7 +309,11 @@
         "aria-label": translations.homePage.addChatButton
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    )))));
+    )));
+    function scrollToChat() {
+      chatSection.scrollIntoView();
+    }
+    return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", null, translations.homePage.appName)), /* @__PURE__ */ createElement("div", null, overviewSection, chatSection));
   }
 
   // src/Model/Utility/typeSafety.ts

src/View/homePage.css

@@ -21,6 +21,21 @@
   scroll-snap-align: center;
 }
 
+@media (max-width: 640px) {
+  #home-page > div {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+  }
+
+  #home-page > div > div {
+    height: 100%;
+    overflow: scroll;
+
+    padding: var(--content-padding)
+  }
+}
+
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;

src/View/homePage.tsx

@@ -5,43 +5,68 @@ import * as React from "bloatless-react";
 import { translations } from "./translations";
 
 export function HomePage() {
+  // sections
+  const overviewSection = (
+    <div id="overview-section">
+      <h2>{translations.homePage.overviewHeadline}</h2>
+
+      <div class="tile flex-no">
+        <span class="icon">cell_tower</span>
+        <div>
+          <b>{translations.homePage.statusHeadline}</b>
+        </div>
+      </div>
+      <button class="tile flex-no">
+        <span class="icon">settings</span>
+        <div>{translations.homePage.settingsButton}</div>
+      </button>
+
+      <div class="mobile-only">
+        <hr></hr>
+
+        <div class="flex-row justify-end">
+          <button class="ghost width-50" on:click={scrollToChat}>
+            {translations.homePage.scrollToChatButton}
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const chatSection = (
+    <div id="chat-section">
+      <h2>{translations.homePage.chatsHeadline}</h2>
+
+      <div class="flex-row width-input">
+        <input
+          placeholder={translations.homePage.addChatPlaceholder}
+          aria-label={translations.homePage.addChatAudioLabel}
+        ></input>
+        <button
+          class="primary"
+          aria-label={translations.homePage.addChatButton}
+        >
+          <span class="icon">add</span>
+        </button>
+      </div>
+    </div>
+  );
+
+  // methods
+  function scrollToChat() {
+    chatSection.scrollIntoView();
+  }
+
+  // final
   return (
     <article id="home-page">
       <header>
         <span>{translations.homePage.appName}</span>
       </header>
       <div>
-        <div id="overview-section">
+        {overviewSection}
-          <h2>{translations.homePage.overviewHeadline}</h2>
+        {chatSection}
-
-          <div class="tile flex-no">
-            <span class="icon">cell_tower</span>
-            <div>
-              <h3>{translations.homePage.statusHeadline}</h3>
-            </div>
-          </div>
-          <button class="tile flex-no">
-            <span class="icon">settings</span>
-            <div>{translations.homePage.settingsButton}</div>
-          </button>
-        </div>
-
-        <div id="chat-section">
-          <h2>{translations.homePage.chatsHeadline}</h2>
-
-          <div class="flex-row width-input">
-            <input
-              placeholder={translations.homePage.addChatPlaceholder}
-              aria-label={translations.homePage.addChatAudioLabel}
-            ></input>
-            <button
-              class="primary"
-              aria-label={translations.homePage.addChatButton}
-            >
-              <span class="icon">add</span>
-            </button>
-          </div>
-        </div>
       </div>
     </article>
   );

src/View/translations.ts

@@ -13,8 +13,11 @@ const englishTranslations = {
     statusHeadline: "Status",
     settingsButton: "Settings",
 
+    scrollToChatButton: "Chats",
+
     ///
 
+    backToOverviewAudioLabel: "go back to overview",
     chatsHeadline: "Chats",
 
     addChatAudioLabel: "name of new chat",