Responsive UI improvements (#41)

* Improved responsive UX for media profiles

* Improved responsiveness for other pages

* Added docs; fixed up stragglers

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

@@ -4,14 +4,14 @@
       <.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">
-      Source #<%= @source.id %>
+      Source <span class="hidden sm:inline">#<%= @source.id %></span>
     </h2>
   </div>
 
   <nav>
     <.link navigate={~p"/sources/#{@source}/edit"}>
       <.button color="bg-primary" rounding="rounded-full">
-        <.icon name="hero-pencil-square" class="mr-2" /> Edit Source
+        <.icon name="hero-pencil-square" class="mr-2" /> Edit <span class="hidden sm:inline pl-1">Source</span>
       </.button>
     </.link>
   </nav>
@@ -19,7 +19,9 @@
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
   <div class="max-w-full overflow-x-auto">
     <div class="flex flex-col gap-10 dark:text-white">
-      <h3 class="mt-14 font-bold text-xl">Relationships</h3>
+      <h3 class="font-bold text-xl">Attributes for "<%= @source.friendly_name %>"</h3>
+
+      <h3 class="font-bold text-lg">Relationships</h3>
       <.list>
         <:item title="media_profile">
           <.link
@@ -31,7 +33,7 @@
         </:item>
       </.list>
 
-      <h3 class="font-bold text-xl">Attributes</h3>
+      <h3 class="font-bold text-lg">Attributes</h3>
       <.list_items_from_map map={Map.from_struct(@source)} />
 
       <h3 class="font-bold text-xl">Downloaded Media</h3>