style chat grid

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>