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