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]
       }
     ));