mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Joshen Lim
597ad2ba56
## Context Load more button in unified logs was off center because the `table` element was exceeded the viewport width. The fix needed was hence to adjust the width of the `table` to only take up the remaining width of the viewport which then fixes the positioning of the load more button. ### Before <img width="1446" height="204" alt="image" src="https://github.com/user-attachments/assets/fcd99e18-ede8-4454-b612-91b4384fb3e1" /> ### After <img width="1450" height="274" alt="image" src="https://github.com/user-attachments/assets/d5f56383-bdb0-4418-a36f-242e72fe3a5b" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated table container styling and layout properties for improved rendering. * Enhanced table header cell structure with improved styling attributes. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45914) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { ComponentPropsWithRef, forwardRef } from 'react'
|
|
import { cn } from 'ui'
|
|
import {
|
|
Table as ShadcnTable,
|
|
TableBody as ShadcnTableBody,
|
|
TableCaption as ShadcnTableCaption,
|
|
TableCell as ShadcnTableCell,
|
|
TableFooter as ShadcnTableFooter,
|
|
TableHead as ShadcnTableHead,
|
|
TableHeader as ShadcnTableHeader,
|
|
TableRow as ShadcnTableRow,
|
|
} from 'ui/src/components/shadcn/ui/table'
|
|
|
|
// Only create a custom component for Table with the added props
|
|
export const Table = forwardRef<HTMLTableElement, ComponentPropsWithRef<typeof ShadcnTable>>(
|
|
({ className, onScroll, ...props }, ref) => (
|
|
<ShadcnTable
|
|
ref={ref}
|
|
{...props}
|
|
className={cn(className)}
|
|
containerProps={{
|
|
onScroll,
|
|
className: 'h-full w-full overflow-auto caption-bottom text-sm [&>table]:table-fixed',
|
|
}}
|
|
/>
|
|
)
|
|
)
|
|
Table.displayName = 'Table'
|
|
|
|
export const TableHeader = forwardRef<
|
|
HTMLTableSectionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableHeader>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableHeader ref={ref} className={cn('sticky top-0 z-1', className)} {...props} />
|
|
))
|
|
TableHeader.displayName = 'TableHeader'
|
|
|
|
export const TableBody = forwardRef<
|
|
HTMLTableSectionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableBody>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableBody
|
|
ref={ref}
|
|
{...props}
|
|
className={cn(
|
|
'transition-colors outline-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary',
|
|
className
|
|
)}
|
|
/>
|
|
))
|
|
TableBody.displayName = 'TableBody'
|
|
|
|
export const TableFooter = forwardRef<
|
|
HTMLTableSectionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableFooter>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableFooter ref={ref} className={cn('text-primary-foreground', className)} {...props} />
|
|
))
|
|
TableFooter.displayName = 'TableFooter'
|
|
|
|
export const TableRow = forwardRef<
|
|
HTMLTableRowElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableRow>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableRow
|
|
ref={ref}
|
|
className={cn('bg-background hover:bg-surface-100 border-b-0', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableRow.displayName = 'TableRow'
|
|
|
|
export const TableHead = forwardRef<
|
|
HTMLTableCellElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableHead>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableHead
|
|
ref={ref}
|
|
className={cn(
|
|
'text-xs! font-normal! text-foreground-lighter font-mono',
|
|
'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0',
|
|
'text-muted-foreground h-8 px-2 text-left align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableHead.displayName = 'TableHead'
|
|
|
|
export const TableCell = forwardRef<
|
|
HTMLTableCellElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableCell>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableCell
|
|
ref={ref}
|
|
className={cn('text-xs py-1! p-2 *:[[role=checkbox]]:translate-y-[2px] truncate', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCell.displayName = 'TableCell'
|
|
|
|
export const TableCaption = forwardRef<
|
|
HTMLTableCaptionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableCaption>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableCaption ref={ref} className={cn('text-sm', className)} {...props} />
|
|
))
|
|
TableCaption.displayName = 'TableCaption'
|