calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-22 16:55:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 make site labels column design nicer

Browse Source
This commit is contained in:
Fred KISSIE
2026-05-11 17:04:44 +02:00
parent b9ab35a05b
commit c44c02b8ba
1 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/SitesTable.tsx
View File

@@ -469,7 +469,11 @@ export default function SitesTable({
// The label feature should be added to the tiers // The label feature should be added to the tiers
{ {
accessorKey: "labels", accessorKey: "labels",
header: () => <span className="p-3">{t("labels")}</span>, header: () => (
<span className="p-3 text-end w-full inline-block">
{t("labels")}
</span>
),
cell: ({ row }) => { cell: ({ row }) => {
return <SiteLabelCell site={row.original} orgId={orgId} />; return <SiteLabelCell site={row.original} orgId={orgId} />;
} }
@@ -679,6 +683,8 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const router = useRouter(); const router = useRouter();
const labels = site.labels ?? []; const labels = site.labels ?? [];
@@ -722,7 +728,7 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
return ( return (
<div className="inline-flex flex-wrap items-center justify-end w-full gap-1"> <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
{optimisticLabels.map((label) => ( {optimisticLabels.slice(0, 3).map((label) => (
<Button <Button
key={label.labelId} key={label.labelId}
variant="outline" variant="outline"
@@ -740,14 +746,27 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
"--color": label.color "--color": label.color
}} }}
/> />
<span className="whitespace-nowrap text-ellipsis max-w-20 overflow-hidden relative bottom-0.5"> <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative bottom-0.5">
{label.name} {label.name}
</span> </span>
<XIcon className="size-3 flex-none" /> <XIcon className="size-3 flex-none" />
</Button> </Button>
))} ))}
<Popover> {optimisticLabels.length > 3 && (
<Button
variant="outline"
className={cn(
"inline-flex gap-1 items-center",
"rounded-full text-sm cursor-pointer",
"px-1.5 py-0 h-auto"
)}
onClick={() => setIsPopoverOpen(true)}
>
+{optimisticLabels.length - 3}
</Button>
)}
<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
size="icon" size="icon"