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,27 +5,36 @@ import * as React from "bloatless-react";
 import { translations } from "./translations";
 
 export function HomePage() {
-  return (
+  // sections
-    <article id="home-page">
+  const overviewSection = (
-      <header>
-        <span>{translations.homePage.appName}</span>
-      </header>
-      <div>
     <div id="overview-section">
       <h2>{translations.homePage.overviewHeadline}</h2>
 
       <div class="tile flex-no">
         <span class="icon">cell_tower</span>
         <div>
-              <h3>{translations.homePage.statusHeadline}</h3>
+          <b>{translations.homePage.statusHeadline}</b>
         </div>
       </div>
       <button class="tile flex-no">
         <span class="icon">settings</span>
         <div>{translations.homePage.settingsButton}</div>
       </button>
-        </div>
 
+      <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>
 
@@ -42,6 +51,22 @@ export function HomePage() {
         </button>
       </div>
     </div>
+  );
+
+  // methods
+  function scrollToChat() {
+    chatSection.scrollIntoView();
+  }
+
+  // final
+  return (
+    <article id="home-page">
+      <header>
+        <span>{translations.homePage.appName}</span>
+      </header>
+      <div>
+        {overviewSection}
+        {chatSection}
       </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",