Responsive UI improvements (#41)

* Improved responsive UX for media profiles

* Improved responsiveness for other pages

* Added docs; fixed up stragglers

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

@@ -1,9 +1,11 @@
 <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">All Media Profiles</h2>
+  <h2 class="text-title-md2 font-bold text-black dark:text-white">
+    Media Profiles
+  </h2>
   <nav>
     <.link navigate={~p"/media_profiles/new"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <span class="font-bold mx-2">+</span> New Media Profile
+        <span class="font-bold text-xl mx-2">+</span> New <span class="hidden sm:inline pl-1">Media Profile</span>
       </.button>
     </.link>
   </nav>
@@ -11,7 +13,7 @@
 
 <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
   <div class="max-w-full overflow-x-auto">
-    <div class="flex flex-col gap-10">
+    <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">
           <%= media_profile.name %>
@@ -23,18 +25,8 @@
           <%= media_profile.preferred_resolution %>
         </:col>
         <:col :let={media_profile} label="" class="flex place-content-evenly">
-          <.link
-            navigate={~p"/media_profiles/#{media_profile.id}"}
-            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-          >
-            <.icon name="hero-eye" />
-          </.link>
-          <.link
-            navigate={~p"/media_profiles/#{media_profile.id}/edit"}
-            class="hover:text-secondary duration-200 ease-in-out mx-0.5"
-          >
-            <.icon name="hero-pencil-square" />
-          </.link>
+          <.icon_link href={~p"/media_profiles/#{media_profile.id}"} icon="hero-eye" class="mx-1" />
+          <.icon_link href={~p"/media_profiles/#{media_profile.id}/edit"} icon="hero-pencil-square" class="mx-1" />
         </:col>
       </.table>
     </div>

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

@@ -97,7 +97,7 @@
     help="Will grab the closest available resolution if your preferred is not available"
   />
 
-  <.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile</.button>
+  <.button class="my-10 sm:mb-7.5 w-full sm:w-auto">Save Media profile</.button>
 
   <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mb-5">
     <.output_template_help />

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

@@ -1,17 +1,17 @@
 <div class="mb-6 flex gap-3 flex-row items-center justify-between">
-  <div class="flex gap-3 items-center">
+  <div class="flex items-center">
     <.link navigate={~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">
-      Media Profile #<%= @media_profile.id %>
+    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-2">
+      Media Profile <span class="hidden sm:inline">#<%= @media_profile.id %></span>
     </h2>
   </div>
 
   <nav>
     <.link navigate={~p"/media_profiles/#{@media_profile}/edit"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <.icon name="hero-pencil-square" class="mr-2" /> Edit Media Profile
+        <.icon name="hero-pencil-square" class="mr-2" />Edit <span class="hidden sm:inline pl-1">Media Profile</span>
       </.button>
     </.link>
   </nav>
@@ -19,7 +19,7 @@
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
   <div class="max-w-full overflow-x-auto">
     <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="font-bold text-xl">Attributes</h3>
+      <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
       <.list_items_from_map map={Map.from_struct(@media_profile)} />
     </div>
 
@@ -40,7 +40,7 @@
         class="mt-5 md:mt-0"
       >
         <.button color="bg-meta-1" rounding="rounded-full">
-          Delete Profile, Sources and Files
+          Delete Profile, Sources, and Files
         </.button>
       </.link>
     </section>