Improve UI

app/views/clips/show.html.erb

@@ -1,12 +1,44 @@
 <% cache @clip do %>
   <h1><%= @clip.title %></h1>
 <% end %>
-<% if @clip.video.attached? %>
-<%= video_tag @clip.video, :controls => true%><br>
-<% end %>
-<b>Category:</b> <%= link_to @clip.category.name, @clip.category %><br>
-<b>Tags:</b> <%= @clip.tags.map(&:name).join(', ') %><br>
-<% if authenticated? %>
-  <%= button_to "Edit", edit_clip_path(@clip), :method => "get" %>
-  <%= button_to "Delete", @clip, method: :delete, data: { turbo_confirm: "Are you sure?" } %>
-<% end %>
+<table>
+  <tr>
+    <% if @clip.video.attached? %>
+      <td>
+        <%= video_tag @clip.video, :controls => true%>
+      </td>
+    <% end %>
+    <td valign="top">
+      <table border="1">
+        <tr>
+          <td valign="top"><b>Category:</b></td>
+          <td><%= link_to @clip.category.name, @clip.category %></td>
+        </tr>
+        <tr>
+          <td valign="top"><b>Tags:</b></td>
+          <td><%= @clip.tags.map(&:name).join(', ') %></td>
+        </tr>
+        <tr>
+          <td valign="top"><b>Length:</b></td>
+          <td><%= seconds_to_time(@clip.video.metadata["duration"]) %></td>
+        </tr>
+        <tr>
+          <td valign="top"><b>Last Updated:</b></td>
+          <td><%= @clip.updated_at %></td>
+        </tr>
+        <tr>
+          <td valign="top"><b>Created:</b></td>
+          <td><%= @clip.created_at %></td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <% if authenticated? %>
+              <%= button_to "Edit", edit_clip_path(@clip), :method => "get" %>
+              <%= button_to "Delete", @clip, method: :delete, data: { turbo_confirm: "Are you sure?" } %>
+            <% end %>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>