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

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

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>