fix(consumers): correct consumer-group list pagination layout

Two layout fixes surfaced by the group list page:

- group-list rendered its table inside ListLayoutContent (flex-1),
  which grew to fill the min-h-screen layout and pushed the pagination
  bar to the bottom of the viewport. Render <Table> directly like the
  other list pages so pagination sits under the last row.
- ListLayoutPagination did not stretch its child, so DataTablePagination
  collapsed to content width and its internal justify-between clustered
  the controls on the left. Add [&>*]:w-full so the controls span the
  row (also fixes topics/quotas/users/roles list pages).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jvorcak

frontend/src/components/pages/consumers/group-list.tsx

@@ -29,7 +29,6 @@ import {
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'components/redpanda-ui/components/empty';
 import {
   ListLayout,
-  ListLayoutContent,
   ListLayoutFilters,
   ListLayoutPagination,
   ListLayoutSearchInput,
@@ -330,26 +329,24 @@ const GroupList: FC = () => {
         />
       </ListLayoutFilters>
 
-      <ListLayoutContent>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  type Meta = { align?: 'right'; headWidth?: 'auto' | 'sm' | 'md' | 'lg' | 'xl' | 'fit' | 'full' };
-                  const meta = header.column.columnDef.meta as Meta | undefined;
-                  return (
-                    <TableHead align={meta?.align} key={header.id} width={meta?.headWidth}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </TableHead>
-                  );
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>{renderBody()}</TableBody>
-        </Table>
-      </ListLayoutContent>
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                type Meta = { align?: 'right'; headWidth?: 'auto' | 'sm' | 'md' | 'lg' | 'xl' | 'fit' | 'full' };
+                const meta = header.column.columnDef.meta as Meta | undefined;
+                return (
+                  <TableHead align={meta?.align} key={header.id} width={meta?.headWidth}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>{renderBody()}</TableBody>
+      </Table>
 
       <ListLayoutPagination>
         <DataTablePagination table={table} />

frontend/src/components/redpanda-ui/components/list-layout.tsx

@@ -169,7 +169,10 @@ interface ListLayoutPaginationProps extends React.HTMLAttributes<HTMLDivElement>
 const ListLayoutPagination = React.forwardRef<HTMLDivElement, ListLayoutPaginationProps>(
   ({ className, children, ...props }, ref) => (
     <div
-      className={cn('flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between', className)}
+      className={cn(
+        'flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between [&>*]:w-full',
+        className
+      )}
       ref={ref}
       {...props}
     >