fix(orgs): keep organization cards at column width when few are shown (#410)

The organizations grid used `repeat(auto-fit, minmax(27rem, 1fr))`. `auto-fit` collapses empty tracks, so with a single organization the one card stretched across the whole content area, while two or more sat at half width. `auto-fill` keeps the tracks, so a card is the same width no matter how many there are.

Both the list and the loading skeleton use the same class, so both changed.

Checked in the browser at 820, 1440 and 2000 px wide with one and with four organizations: one card now stays at column width, two columns at 1440, three at 2000, and a single column below the `sm` breakpoint, all unchanged from before for two or more cards.

src/components/organizations/OrganizationsList.tsx

@@ -306,7 +306,7 @@ export function OrganizationList({
   }, [organizations, filter]);
 
   return isLoading ? (
-    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(27rem,1fr))] gap-4">
+    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(27rem,1fr))] gap-4">
       {Array.from({ length: 5 }).map((_, i) => (
         <Skeleton key={i} className="h-[11.25rem] w-full" />
       ))}
@@ -340,7 +340,7 @@ export function OrganizationList({
       )}
     </div>
   ) : (
-    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(27rem,1fr))] gap-4 pb-20 sm:pb-0">
+    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(27rem,1fr))] gap-4 pb-20 sm:pb-0">
       {filteredOrganizations.map((org, index) => {
         const isLoading = loadingOrgIds.has(org.id ?? "");
         const statusBadge = getStatusBadge(org.status);