fix(frontend): stabilize multiselect behavior and UI spacing (#154)

* fix(frontend): left-align announcement logo in homepage banner

* fix(frontend): keep multiselect panels floating and preserve summaries

* fix(frontend): rebalance config card header spacing

* fix(frontend): normalize formatting and fix multiselect modal behavior

* fix(frontend): restore config divider spacing on desktop
This commit is contained in:
sagit
2026-02-19 20:50:12 +08:00
committed by GitHub
parent 18c2da7c7e
commit 66de566a00
52 changed files with 743 additions and 301 deletions
@@ -17,10 +17,17 @@ export interface TableProps extends React.ComponentProps<"table"> {
classNames?: TableClassNames;
}
export function Table({ children, className, classNames, ...props }: TableProps) {
export function Table({
children,
className,
classNames,
...props
}: TableProps) {
return (
<TableStyleContext.Provider value={{ thClassName: classNames?.th }}>
<div className={cn("w-full overflow-auto rounded-md", classNames?.wrapper)}>
<div
className={cn("w-full overflow-auto rounded-md", classNames?.wrapper)}
>
<table className={cn("w-full text-sm", className)} {...props}>
{children}
</table>
@@ -29,7 +36,11 @@ export function Table({ children, className, classNames, ...props }: TableProps)
);
}
export function TableHeader({ children, className, ...props }: React.ComponentProps<"thead">) {
export function TableHeader({
children,
className,
...props
}: React.ComponentProps<"thead">) {
const childArray = React.Children.toArray(children);
const hasRow = childArray.some(
(child) => React.isValidElement(child) && child.type === TableRow,
@@ -42,7 +53,8 @@ export function TableHeader({ children, className, ...props }: React.ComponentPr
);
}
interface TableBodyProps<T> extends Omit<React.ComponentProps<"tbody">, "children"> {
interface TableBodyProps<T>
extends Omit<React.ComponentProps<"tbody">, "children"> {
children?: React.ReactNode | ((item: T) => React.ReactNode);
emptyContent?: React.ReactNode;
isLoading?: boolean;
@@ -120,19 +132,28 @@ export function TableBody<T>({
);
}
export function TableColumn({ className, ...props }: React.ComponentProps<"th">) {
export function TableColumn({
className,
...props
}: React.ComponentProps<"th">) {
const { thClassName } = React.useContext(TableStyleContext);
return (
<th
className={cn("px-3 py-2 text-left font-medium text-default-600", thClassName, className)}
className={cn(
"px-3 py-2 text-left font-medium text-default-600",
thClassName,
className,
)}
{...props}
/>
);
}
export function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
return <tr className={cn("border-b last:border-b-0", className)} {...props} />;
return (
<tr className={cn("border-b last:border-b-0", className)} {...props} />
);
}
export function TableCell({ className, ...props }: React.ComponentProps<"td">) {