use css truncate everywhere and remove StringUtils.truncate function (#513)

Co-authored-by: robs <git@robs.social>

lib/pinchflat/utils/string_utils.ex

@@ -25,23 +25,6 @@ defmodule Pinchflat.Utils.StringUtils do
     |> String.slice(0..(length - 1))
   end
 
-  @doc """
-  Truncates a string to the given length and adds `...` if the string is longer than the given length.
-  Will break on a word boundary. Nothing happens if the string is shorter than the given length.
-
-  Returns binary()
-  """
-  def truncate(string, length) do
-    if String.length(string) > length do
-      string
-      |> String.slice(0..(length - 1))
-      |> String.replace(~r/\s+\S*$/, "")
-      |> Kernel.<>("...")
-    else
-      string
-    end
-  end
-
   @doc """
   Wraps a string in double braces. Useful as a UI helper now that
   LiveView 1.0.0 allows `{}` for interpolation so now we can't use braces

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -26,7 +26,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
     ~H"""
     <button
       class={[
-        "text-center font-medium text-white",
+        "text-center font-medium text-white whitespace-nowrap",
         "#{@rounding} inline-flex items-center justify-center px-8 py-4",
         "#{@color}",
         "hover:bg-opacity-90 lg:px-8 xl:px-10",

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -36,7 +36,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
         <tr class="text-left bg-meta-4">
           <th
             :for={col <- @col}
-            class={["px-4 py-4 font-medium text-white xl:pl-11", col[:sort_key] && "cursor-pointer"]}
+            class={["px-4 py-4 font-medium text-white", col[:sort_key] && "cursor-pointer"]}
             phx-click={col[:sort_key] && "sort_update"}
             phx-value-sort_key={col[:sort_key]}
           >
@@ -56,7 +56,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
           <td
             :for={col <- @col}
             class={[
-              "px-4 py-5 pl-9 xl:pl-11",
+              "px-4 py-5",
               col[:class]
             ]}
           >

lib/pinchflat_web/controllers/media_items/media_item_html/edit.html.heex

@@ -1,6 +1,6 @@
 <div class="mb-6 flex gap-3 flex-row items-center">
-  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
-    Editing "{StringUtils.truncate(@media_item.title, 35)}"
+    Editing "{@media_item.title}"
   </h2>
 </div>
 

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -1,10 +1,10 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <div class="flex gap-3 items-center">
+  <div class="flex gap-3 items-center min-w-0">
     <.link href={~p"/sources/#{@media_item.source_id}"}>
       <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
-    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
-      {StringUtils.truncate(@media_item.title, 35)}
+      {@media_item.title}
     </h2>
   </div>
 

lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex

@@ -2,7 +2,7 @@
   <.link href={~p"/media_profiles"}>
     <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
   </.link>
-  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
     Editing "{@media_profile.name}"
   </h2>
 </div>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex

@@ -14,7 +14,7 @@
   <div class="max-w-full overflow-x-auto">
     <div class="flex flex-col gap-10 min-w-max">
       <.table rows={@media_profiles} table_class="text-black dark:text-white">
-        <:col :let={media_profile} label="Name">
+        <:col :let={media_profile} label="Name" class="truncate max-w-xs">
           <.subtle_link href={~p"/media_profiles/#{media_profile.id}"}>
             {media_profile.name}
           </.subtle_link>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -1,9 +1,9 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <div class="flex items-center">
+  <div class="flex items-center min-w-0">
     <.link href={~p"/media_profiles"}>
       <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
-    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-2">
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-2 truncate">
       {@media_profile.name}
     </h2>
   </div>

lib/pinchflat_web/controllers/searches/search_html/show.html.heex

@@ -1,6 +1,6 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <h2 class="text-title-md2 font-bold text-black dark:text-white">
+  <h2 class="text-title-md2 font-bold text-black dark:text-white truncate">
-    Results for "{StringUtils.truncate(@search_term, 50)}"
+    Results for "{@search_term}"
   </h2>
 </div>
 

lib/pinchflat_web/controllers/sources/source_html/edit.html.heex

@@ -2,7 +2,7 @@
   <.link href={~p"/sources"}>
     <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
   </.link>
-  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+  <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
     Editing "{@source.custom_name}"
   </h2>
 </div>

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -1,9 +1,9 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <div class="flex gap-3 items-center">
+  <div class="flex gap-3 items-center min-w-0">
     <.link href={~p"/sources"}>
       <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
     </.link>
-    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
       {@source.custom_name}
     </h2>
   </div>

lib/pinchflat_web/controllers/sources/source_live/index_table_live.html.heex

@@ -18,7 +18,7 @@
     <:col :let={source} label="Size" sort_key="media_size_bytes">
       <.readable_filesize byte_size={source.media_size_bytes} />
     </:col>
-    <:col :let={source} label="Media Profile" sort_key="media_profile_name">
+    <:col :let={source} label="Media Profile" sort_key="media_profile_name" class="truncate max-w-xs">
       <.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
         {source.media_profile.name}
       </.subtle_link>

test/pinchflat/utils/string_utils_test.exs

@@ -28,20 +28,6 @@ defmodule Pinchflat.Utils.StringUtilsTest do
     end
   end
 
-  describe "truncate/2" do
-    test "truncates a string to the given length and adds ..." do
-      assert StringUtils.truncate("hello world", 5) == "hello..."
-    end
-
-    test "breaks on a word boundary" do
-      assert StringUtils.truncate("hello world", 7) == "hello..."
-    end
-
-    test "does not truncate a string shorter than the given length" do
-      assert StringUtils.truncate("hello", 10) == "hello"
-    end
-  end
-
   describe "double_brace/1" do
     test "wraps a string in double braces" do
       assert StringUtils.double_brace("hello") == "{{ hello }}"

test/pinchflat_web/controllers/pages/job_table_live_test.exs

@@ -48,7 +48,7 @@ defmodule PinchflatWeb.Pages.JobTableLiveTest do
       {_source, media_item, _task, _job} = create_media_item_job()
       {:ok, _view, html} = live_isolated(conn, JobTableLive, session: %{})
 
-      assert html =~ StringUtils.truncate(media_item.title, 35)
+      assert html =~ media_item.title
     end
 
     test "shows a media item link", %{conn: conn} do
@@ -62,7 +62,7 @@ defmodule PinchflatWeb.Pages.JobTableLiveTest do
       {source, _task, _job} = create_source_job()
       {:ok, _view, html} = live_isolated(conn, JobTableLive, session: %{})
 
-      assert html =~ StringUtils.truncate(source.custom_name, 35)
+      assert html =~ source.custom_name
     end
 
     test "shows a source link", %{conn: conn} do