adjust placeholder ui for rules and targets

src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx

@@ -930,6 +930,7 @@ export const ProxyResourceTargetsForm = forwardRef<
                                 colSpan={columns.length}
                                 message={emptyMessage ?? t("targetNoOne")}
                                 action={addTargetButton}
+                                compact
                             />
                         )}
                     </TableBody>

src/components/resource-policy/PolicyAccessRulesTable.tsx

@@ -961,6 +961,7 @@ export function PolicyAccessRulesTable({
                         colSpan={columns.length}
                         message={t("rulesNoOne")}
                         action={emptyStateAction}
+                        compact
                     />
                 )}
             </TableBody>

src/components/ui/data-table-empty-state.tsx

@@ -5,34 +5,48 @@ import { useTranslations } from "next-intl";
 import { type ReactNode } from "react";
 
 const PLACEHOLDER_ROW_COUNT = 5;
+const COMPACT_PLACEHOLDER_ROW_COUNT = 2;
 
 type DataTableEmptyStateProps = {
     colSpan: number;
     action?: ReactNode;
     message?: string;
+    compact?: boolean;
 };
 
 export function DataTableEmptyState({
     colSpan,
     action,
-    message
+    message,
+    compact = false
 }: DataTableEmptyStateProps) {
     const t = useTranslations();
+    const placeholderRows = compact
+        ? COMPACT_PLACEHOLDER_ROW_COUNT
+        : PLACEHOLDER_ROW_COUNT;
+    const minHeightClass = compact ? "min-h-[4.5rem]" : "min-h-[11rem]";
+
     return (
         <TableRow className="hidden sm:table-row hover:bg-transparent data-[state=selected]:bg-transparent">
             <TableCell colSpan={colSpan} className="p-0">
-                <div className="relative min-h-[11rem] w-full overflow-hidden">
+                <div
+                    className={`relative w-full overflow-hidden ${minHeightClass}`}
+                >
                     <div
                         className="absolute inset-0 flex flex-col justify-start"
                         aria-hidden
                     >
-                        {Array.from({ length: PLACEHOLDER_ROW_COUNT }).map(
+                        {Array.from({ length: placeholderRows }).map((_, i) => (
-                            (_, i) => (
+                            <div key={i} className="h-10 shrink-0" />
-                                <div key={i} className="h-10 shrink-0" />
+                        ))}
-                            )
-                        )}
                     </div>
-                    <div className="relative flex min-h-[11rem] w-full flex-col items-center justify-center gap-4 px-4 py-8">
+                    <div
+                        className={`relative flex w-full flex-col items-center justify-center px-4 ${
+                            compact
+                                ? "min-h-[4.5rem] gap-3 py-4"
+                                : "min-h-[11rem] gap-4 py-8"
+                        }`}
+                    >
                         <p className="text-sm text-muted-foreground">
                             {message ?? t("noResults")}
                         </p>