style chat grid

dist/index.css

@@ -23,6 +23,12 @@
   overflow: scroll;
   scroll-snap-align: center;
 }
+#home-page #chat-grid {
+  margin-top: var(--content-padding);
+  display: grid;
+  gap: var(--gap-between-tiles);
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+}
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;
@@ -37,8 +43,32 @@
   #home-page > div {
     gap: 8rem;
   }
+  #home-page #chat-grid {
+    margin-top: 3rem;
+  }
   #home-page #overview-section {
     width: var(--max-input-width);
     min-width: var(--max-input-width);
   }
 }
+
+/* src/View/Components/chatEntry.css */
+.chat-entry {
+  position: relative;
+  display: flex;
+  align-items: flex-end !important;
+  justify-content: start;
+  height: 8rem;
+  overflow: hidden;
+}
+.chat-entry h2 {
+  margin: 0px;
+}
+.chat-entry .shadow {
+  position: absolute;
+  left: -15px;
+  bottom: -45px;
+  font-size: 6rem;
+  opacity: 0.1;
+  white-space: nowrap;
+}

dist/index.js

@@ -928,7 +928,7 @@
 
   // src/View/Components/chatEntry.tsx
   function ChatEntry(chatModel) {
-    return /* @__PURE__ */ createElement("div", { class: "tile flex-column justify-end align-start" }, /* @__PURE__ */ createElement("h2", null, chatModel.info.primaryChannel));
+    return /* @__PURE__ */ createElement("button", { class: "chat-entry tile" }, /* @__PURE__ */ createElement("span", { class: "shadow" }, chatModel.info.primaryChannel), /* @__PURE__ */ createElement("h2", null, chatModel.info.primaryChannel));
   }
   var ChatModelToChatEntry = (chatModel) => {
     return ChatEntry(chatModel);
@@ -1024,7 +1024,7 @@
     )), /* @__PURE__ */ createElement(
       "div",
       {
-        class: "grid gap",
+        id: "chat-grid",
         "children:append": [chatListViewModel2.chatModels, ChatModelToChatEntry]
       }
     ));

src/View/Components/chatEntry.css

@@ -0,0 +1,28 @@
+.chat-entry {
+    position: relative;
+
+    display: flex;
+    align-items: flex-end !important;
+    justify-content: start;
+
+    height: 8rem;
+
+    overflow: hidden;
+}
+
+.chat-entry h2 {
+    margin: 0px;
+}
+
+.chat-entry .shadow {
+    position: absolute;
+
+    left: -15px;
+    bottom: -45px;
+
+    font-size: 6rem;
+
+    opacity: 0.1;
+
+    white-space: nowrap;
+}

src/View/Components/chatEntry.tsx

@@ -1,12 +1,15 @@
+import "./chatEntry.css";
+
 import * as React from "bloatless-react";
 
 import { ChatModel } from "../../Model/chatModel";
 
 export function ChatEntry(chatModel: ChatModel) {
   return (
-    <div class="tile flex-column justify-end align-start">
+    <button class="chat-entry tile">
+      <span class="shadow">{chatModel.info.primaryChannel}</span>
       <h2>{chatModel.info.primaryChannel}</h2>
-    </div>
+    </button>
   );
 }
 

src/View/homePage.css

@@ -30,6 +30,15 @@
   scroll-snap-align: center;
 }
 
+#home-page #chat-grid {
+  margin-top: var(--content-padding);
+
+  display: grid;
+  gap: var(--gap-between-tiles);
+
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+}
+
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;
@@ -47,6 +56,10 @@
     gap: 8rem;
   }
 
+  #home-page #chat-grid {
+    margin-top: 3rem;
+  }
+
   #home-page #overview-section {
     width: var(--max-input-width);
     min-width: var(--max-input-width);

src/View/homePage.tsx

@@ -166,7 +166,7 @@ export function HomePage(
       </div>
 
       <div
-        class="grid gap"
+        id="chat-grid"
         children:append={[chatListViewModel.chatModels, ChatModelToChatEntry]}
       ></div>
     </div>