Live page now looks better, just need to make form submit not reload the page.

pages/live/index.html

@@ -1,21 +1,26 @@
 <script>
-  let req = new GetJson("/api/stream/1");
-  let link_req = new GetJson("/api/stream/1/links");
 </script>
 <script src="https://player.twitch.tv/js/embed/v1.js"></script>
 
-<div x-init="Stream = await req.theData()" x-data="{Stream: {}}">
+<div class="flex-col w-full"
-  <div id="twitch-player" class="flex justify-center items-center w-full bg-gray-300 text-gray-950 text-center aspect-video">
+  x-init="Stream = await GetJson('/api/stream/1')" x-data="{Stream: {}}">
+
+  <div id="twitch-player" class="aspect-video">
   </div>
 
-  <div class="p-6 flex flex-col justify-center">
+  <h2>Links Found in Chat</h2>
+
+  <grid class="two-panel">
     <div>
-      <h2>Links Found in Chat</h2>
+      <table class="w-full" x-init="links = await GetJson('/api/stream/1/links')" x-data="{links: {}}">
-      <ul x-init="links = await link_req.theData()" x-data="{links: {}}">
+        <tr class="table-header"><th>URL</th><th>Description</th></tr>
         <template x-for="item in links">
-          <li><a x-text="item.description" x-bind:href="item.url"></a></li>
+          <tr class="table-row">
+            <td class="p-2"><a x-text="item.url" x-bind:href="item.url" target="_blank"></a></td>
+            <td class="p-2" x-text="item.description"></td>
+          </tr>
         </template>
-      </ul>
+      </table>
     </div>
 
     <form action="/api/link" method="POST">
@@ -31,7 +36,7 @@
         </bottom>
       </card>
     </form>
-  </div>
+  </bar>
 </div>
 
 <script>

static/input_style.css

@@ -6,7 +6,7 @@ body {
 }
 
 main {
-  @apply flex flex-col items-center gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
+  @apply flex flex-col justify-stretch items-center gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
 }
 
 header {

static/style.css

@@ -339,6 +339,9 @@
   .items-center {
     align-items: center;
   }
+  .items-stretch {
+    align-items: stretch;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -351,6 +354,9 @@
   .justify-evenly {
     justify-content: space-evenly;
   }
+  .justify-stretch {
+    justify-content: stretch;
+  }
   .gap-0\! {
     gap: calc(var(--spacing) * 0) !important;
   }
@@ -487,15 +493,15 @@
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
-  .\!p-0 {
-    padding: calc(var(--spacing) * 0) !important;
-  }
   .\!p-1 {
     padding: calc(var(--spacing) * 1) !important;
   }
   .\!p-4 {
     padding: calc(var(--spacing) * 4) !important;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -636,11 +642,6 @@
       }
     }
   }
-  .sm\:\!p-0 {
-    @media (width >= 40rem) {
-      padding: calc(var(--spacing) * 0) !important;
-    }
-  }
   .sm\:p-0 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 0);
@@ -651,6 +652,11 @@
       width: var(--container-4xl);
     }
   }
+  .lg\:max-w-4xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-4xl);
+    }
+  }
   .dark\:bg-gray-300 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-300);
@@ -684,6 +690,7 @@ main {
   min-height: 100vh;
   flex-direction: column;
   align-items: center;
+  justify-content: stretch;
   gap: calc(var(--spacing) * 4);
   background-color: var(--color-gray-200);
   padding: calc(var(--spacing) * 0);

views/layouts/main.html

@@ -35,7 +35,7 @@
   </header>
 
   <main>
-    <block class="lg:w-4xl center-horizontal !p-1 sm:p-0">
+    <block class="w-full lg:max-w-4xl center-horizontal !p-1 sm:p-0">
       {{embed}}
     </block>
   </main>