feat: improve organization invitation UX

- Show sender's full name in invitation emails
- Use relative time for "Sent" column (more readable)
- Use date format for "Expires" column (shorter)
- Make invitation table horizontally scrollable

Fixes display cropping issue where long timestamps caused
the pending invitations table to overflow its container.

lib/towerops/accounts/user_notifier.ex

@@ -122,10 +122,25 @@ defmodule Towerops.Accounts.UserNotifier do
   def deliver_invitation_email(invitation, accept_url) do
     subject = "You've been invited to join #{invitation.organization.name} on Towerops"
 
+    invited_by_name =
+      case invitation.invited_by do
+        %User{first_name: first, last_name: last} when not is_nil(first) and not is_nil(last) ->
+          "#{first} #{last}"
+
+        %User{first_name: first} when not is_nil(first) ->
+          first
+
+        %User{email: email} ->
+          email
+
+        _ ->
+          "A team member"
+      end
+
     body = """
     Hi,
 
-    You've been invited to join #{invitation.organization.name} on Towerops as a #{invitation.role}.
+    #{invited_by_name} has invited you to join #{invitation.organization.name} on Towerops as a #{invitation.role}.
 
     You can accept this invitation by visiting the URL below:
 

lib/towerops_web/live/org/settings_live.ex

@@ -210,7 +210,11 @@ defmodule ToweropsWeb.Org.SettingsLive do
 
     case Organizations.create_invitation(attrs) do
       {:ok, invitation} ->
-        invitation = %{invitation | organization: organization}
+        invitation =
+          invitation
+          |> Towerops.Repo.preload(:invited_by)
+          |> Map.put(:organization, organization)
+
         accept_url = url(~p"/invitations/#{invitation.token}")
         UserNotifier.deliver_invitation_email(invitation, accept_url)
 

lib/towerops_web/live/org/settings_live.html.heex

@@ -670,7 +670,7 @@
           </div>
 
           <div class="md:col-span-2">
-            <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
               <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
                 <thead class="bg-gray-50 dark:bg-white/5">
                   <tr>
@@ -707,14 +707,14 @@
                       <.timestamp
                         datetime={invitation.inserted_at}
                         timezone={@timezone}
-                        format="absolute"
+                        format="relative"
                       />
                     </td>
                     <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
                       <.timestamp
                         datetime={invitation.expires_at}
                         timezone={@timezone}
-                        format="absolute"
+                        format="date"
                       />
                     </td>
                     <%= if @membership.role in [:owner, :admin] do %>