improve homepage layout

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">
-          <h2>{translations.homePage.overviewHeadline}</h2>
-
-          <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>
+        {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",