frontend add post toolbar; so far displaying postdate

assets/css/app.css

@@ -9,11 +9,12 @@ body {
 }
 
 .post {
-  @apply bg-base-200 shadow-md rounded-md;
+  @apply bg-base-200 shadow-md rounded-md mb-4;
-  @apply flex flex-col sm:flex-row mb-4;
+  @apply grid grid-cols-[1fr] grid-rows-[min-content_1fr_auto];
+  @apply sm:grid-cols-[13em_auto] sm:grid-rows-[1fr_auto];
 }
 .post :where(article, .userinfo) {
-  @apply p-4 pt-4;
+  @apply p-4 pb-0 sm:pb-4;
 }
 
 .post .bbc-block {

lib/something_erlang_web/live/thread_live/show.ex

@@ -31,16 +31,17 @@ defmodule SomethingErlangWeb.ThreadLive.Show do
     ~H"""
     <div class="post">
         <.user info={@author} />
-        <article class="grow-1 w-full">
+        <article class="postbody">
             <%= raw @article %>
         </article>
+        <.toolbar date={@date} />
     </div>
     """
   end
 
   def user(assigns) do
     ~H"""
-    <aside class="userinfo bg-base-100 shrink-0 sm:w-[13em]">
+    <aside class="userinfo bg-base-100">
         <h3 class="mb-4"><%= @info.name %></h3>
         <div class="title hidden sm:flex flex-col text-sm pr-4">
           <%= raw @info.title %>
@@ -49,6 +50,13 @@ defmodule SomethingErlangWeb.ThreadLive.Show do
     """
   end
 
+  def toolbar(assigns) do
+    ~H"""
+    <div class="sm:col-span-2 text-sm p-2">
+      <%= @date |> Calendar.strftime("%A, %b %d %Y @ %H:%M") %></div>
+    """
+  end
+
   def pagination(assigns) do
     %{page: page_number, page_count: page_count} = assigns.thread
 

lib/something_erlang_web/live/thread_live/show.html.heex

@@ -12,15 +12,15 @@
 <% end %>
 
     <h2>
-        <%= @thread.title %>
+        <%= raw @thread.title %>
     </h2>
 
     <div class="thread my-8">
         <.pagination socket={@socket} thread={@thread} />
 
         <%= for post <- @thread.posts do %>
-            <.post author={post.userinfo} article={post.postbody} />
+            <.post author={post.userinfo} article={post.postbody} date={post.postdate} />
-            <% end %>
+        <% end %>
 
-            <.pagination socket={@socket} thread={@thread} />
+        <.pagination socket={@socket} thread={@thread} />
     </div>