[Enhancement] Improve layout of media item page on large displays (#192)

* Improved layout of media items page

* Removed useless anchor tag

lib/pinchflat_web/components/core_components.ex

@@ -19,7 +19,6 @@ defmodule PinchflatWeb.CoreComponents do
   import PinchflatWeb.Gettext
 
   alias Phoenix.LiveView.JS
-  alias PinchflatWeb.CustomComponents.TextComponents
 
   @doc """
   Renders a modal.
@@ -638,9 +637,11 @@ defmodule PinchflatWeb.CoreComponents do
 
     ~H"""
     <ul>
-      <li :for={{k, v} <- @iterable_attributes} class="mb-2">
+      <li :for={{k, v} <- @iterable_attributes} class="mb-2 w-2/3">
         <strong><%= k %>:</strong>
-        <TextComponents.inline_code><%= v %></TextComponents.inline_code>
+        <code class="inline-block text-sm font-mono text-gray p-0.5 mx-0.5">
+          <%= v %>
+        </code>
       </li>
     </ul>
     """

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -35,11 +35,12 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   Renders a subtle link with the given href and content.
   """
   attr :href, :string, required: true
+  attr :target, :string, default: "_self"
   slot :inner_block
 
   def subtle_link(assigns) do
     ~H"""
-    <.link href={@href} class="underline decoration-bodydark decoration-1 hover:decoration-white">
+    <.link href={@href} target={@target} class="underline decoration-bodydark decoration-1 hover:decoration-white">
       <%= render_slot(@inner_block) %>
     </.link>
     """
@@ -59,4 +60,22 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     </.link>
     """
   end
+
+  @doc """
+  Renders a block of text with each line broken into a separate span.
+  """
+  attr :text, :string, required: true
+
+  def break_on_newline(assigns) do
+    broken_text =
+      assigns.text
+      |> String.split("\n", trim: false)
+      |> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
+
+    assigns = Map.put(assigns, :text, broken_text)
+
+    ~H"""
+    <span><%= @text %></span>
+    """
+  end
 end