improve home page layout

src/View/homePage.css

@@ -1,8 +1,11 @@
 #home-page > div {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
   gap: var(--large-gap);
+
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
 }
 
 #home-page > div > div {
@@ -13,21 +16,30 @@
   gap: var(--gap-between-tiles);
 
   width: 100%;
-  flex: 1;
+  min-width: 100%;
+
+  scroll-snap-align: center;
 }
 
-#home-page #overview-section {
-  max-width: var(--max-input-width);
+@media (min-width: 640px) {
+  #home-page #overview-section {
+    width: 20rem;
+    min-width: 20rem;
+  }
+
+  #home-page #chat-section {
+    flex: 1;
+    min-width: unset;
+  }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1200px) {
   #home-page > div {
-    flex-direction: row;
-
     gap: 8rem;
   }
 
   #home-page #overview-section {
     width: var(--max-input-width);
+    min-width: var(--max-input-width);
   }
 }

src/View/setingsModal.tsx

@@ -1,19 +0,0 @@
-import * as React from "bloatless-react";
-
-import { translations } from "./translations";
-
-export function SetttingsModal() {
-  return (
-    <div class="modal">
-      <div>
-        <main>
-          <h2>{translations.settings.settingsHeadline}</h2>
-        </main>
-        <button>
-          {translations.general.closeButton}
-          <span class="icon">close</span>
-        </button>
-      </div>
-    </div>
-  );
-}

src/index.tsx

@@ -1,7 +1,6 @@
 import ConnectionModel from "./Model/connectionModel";
 import { HomePage } from "./View/homePage";
 import { MainPage } from "./View/mainPage";
-import { SetttingsModal } from "./View/setingsModal";
 import StorageModel from "./Model/storageModel";
 
 // models
@@ -14,4 +13,4 @@ const connectionModel = new ConnectionModel({
 // view
 document
   .querySelector("main")!
-  .append(HomePage(), MainPage(), SetttingsModal());
+  .append(HomePage());