Table UX consistency

grantmakers · Dec 22, 2024 · 8895927 · 8895927
1 parent 4c863b2
commit 8895927
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/apps/web/src/lib/components/profiles/activities/CharitableActivities.svelte b/apps/web/src/lib/components/profiles/activities/CharitableActivities.svelte
@@ -12,22 +12,32 @@
   let { activities, areRestatement }: Props = $props();
 </script>
 
-<div>
-  <div class="sm:flex sm:items-center">
-    <div class="w-1/2 sm:flex-auto">
-      <!-- Source: IRS core dataset via Grantmakers ETL -->
-      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      <div class="mt-2 px-3 text-sm text-gray-700">Summary of Direct Charitable Activities</div>
+<div class="mx-auto max-w-7xl px-4 pb-2 pt-8 text-sm text-slate-700 sm:px-6 lg:px-8">
+  <div class="flex gap-8">
+    <div class="grow">
+      <div class="flex h-full items-center rounded-lg bg-white p-4 shadow">Summary of Direct Charitable Activities</div>
     </div>
+    <!-- <aside class="hidden w-64 md:flex md:items-stretch">
+      <div class="flex grow items-center justify-center rounded-lg bg-white p-2 shadow">
+        <div class="inline-flex p-1 text-center hover:cursor-default">Learn more about Direct Charitable Activities</div>
+      </div>
+    </aside> -->
   </div>
-  <div class="mt-8 flow-root">
-    <div class="-my-2 overflow-x-auto sm:-mx-6">
-      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:mb-4 lg:px-8">
-        {#if areRestatement}
-          The listed Charitable Activities may be a restatement of their grants <Eyes />
-        {/if}
-        <table class="min-w-full table-auto divide-y divide-gray-300">
-          <thead>
+</div>
+
+<div class="flow-root">
+  <div class="-my-2 overflow-x-auto sm:-mx-6">
+    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:mb-4 lg:px-8">
+      {#if areRestatement}
+        The listed Charitable Activities may be a restatement of their grants <Eyes />
+      {/if}
+      <div class="rounded-lg bg-white p-6">
+        <table class="min-w-full table-fixed">
+          <colgroup>
+            <col style="width: 100px" />
+            <col style="width: calc(100% - 100px)" />
+          </colgroup>
+          <thead class="border-b border-b-gray-300">
             <tr>
               <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Expenses</th>
               <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Description</th>
@@ -37,7 +47,9 @@
             {#if activities}
               {#each activities as activity}
                 <tr class="relative even:bg-gray-50">
-                  <td class="px-3 py-4 text-sm">{typeof activity?.expenses === 'number' ? formatToCurrency(activity.expenses) : 'N/A'}</td>
+                  <td class="px-3 py-4 text-right text-sm"
+                    >{typeof activity?.expenses === 'number' ? formatToCurrency(activity.expenses) : 'N/A'}</td
+                  >
                   <td class="px-3 py-4 text-sm">{activity?.description ? activity.description : 'N/A'}</td>
                 </tr>
               {/each}

diff --git a/apps/web/src/lib/components/profiles/grants/GrantRow.svelte b/apps/web/src/lib/components/profiles/grants/GrantRow.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <tr class="relative even:bg-gray-50">
-  <td class="px-3 py-4 text-sm">{formatToCurrency(grant.amount)}</td>
+  <td class="px-3 py-4 text-right text-sm">{formatToCurrency(grant.amount)}</td>
   <td class="px-3 py-4 text-sm">
     <div class="text-md font-bold text-gray-900">{grant.name}</div>
   </td>

diff --git a/apps/web/src/lib/components/profiles/grants/GrantsTable.svelte b/apps/web/src/lib/components/profiles/grants/GrantsTable.svelte
@@ -42,7 +42,7 @@
 <div>
   {#if grantCountAllYears > 0}
     <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <div class="flex gap-8">
+      <div class="flex flex-wrap justify-center gap-8 lg:flex-nowrap">
         <div class="grow">
           <div class="flex h-full items-center rounded-lg bg-white p-4 shadow">
             <div class="text-sm text-slate-700">
@@ -68,7 +68,7 @@
             </div>
           </div>
         </div>
-        <aside class="flex w-64 items-stretch">
+        <aside class="flex w-64">
           <div class="flex grow items-center justify-center rounded-lg bg-white p-2 shadow">
             <div class="inline-flex p-1 hover:cursor-default">
               {#if grantsCurrent}