improve home page layout

dist/index.css

@@ -1,8 +1,10 @@
 /* src/View/homePage.css */
 #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 {
   display: flex;
@@ -10,17 +12,25 @@
   justify-content: start;
   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);
   }
 }

dist/index.js

@@ -309,16 +309,6 @@
     )))));
   }
 
-  // src/View/mainPage.tsx
-  function MainPage() {
-    return /* @__PURE__ */ createElement("article", { id: "home-page" }, /* @__PURE__ */ createElement("header", null, /* @__PURE__ */ createElement("span", null, translations.homePage.appName)), /* @__PURE__ */ createElement("div", null));
-  }
-
-  // src/View/setingsModal.tsx
-  function SetttingsModal() {
-    return /* @__PURE__ */ createElement("div", { class: "modal" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.settings.settingsHeadline)), /* @__PURE__ */ createElement("button", null, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
-  }
-
   // src/Model/Utility/typeSafety.ts
   var DATA_VERSION = "v2";
 
@@ -415,5 +405,5 @@
     messageHandler(data) {
     }
   });
-  document.querySelector("main").append(HomePage(), MainPage(), SetttingsModal());
+  document.querySelector("main").append(HomePage());
 })();

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());