diff --git a/frontend/src/lib/components/DraftBadge.svelte b/frontend/src/lib/components/DraftBadge.svelte index 22f7c4e55a..85b54bdda0 100644 --- a/frontend/src/lib/components/DraftBadge.svelte +++ b/frontend/src/lib/components/DraftBadge.svelte @@ -237,9 +237,6 @@ {:else} - {#if orderedUsers.length > 0} - {@render circleStack()} - {/if} {draft_only ? 'Draft only' : 'Draft'} {/if} diff --git a/frontend/src/lib/components/NoMainFuncBadge.svelte b/frontend/src/lib/components/NoMainFuncBadge.svelte index 250c4fa6e4..f11d7d4028 100644 --- a/frontend/src/lib/components/NoMainFuncBadge.svelte +++ b/frontend/src/lib/components/NoMainFuncBadge.svelte @@ -3,9 +3,9 @@ import { Badge } from './common' - + {#snippet text()} Library script (no exported main function) {/snippet} - Library + Library diff --git a/frontend/src/lib/components/SharedBadge.svelte b/frontend/src/lib/components/SharedBadge.svelte index 61cf489c48..2225614db1 100644 --- a/frontend/src/lib/components/SharedBadge.svelte +++ b/frontend/src/lib/components/SharedBadge.svelte @@ -63,7 +63,7 @@ {#if kind === 'read' || kind === 'write'} - + {#snippet text()} {kind == 'read' ? 'Read & Run only' : 'Read & Write'} {reason} diff --git a/frontend/src/lib/components/common/badge/Badge.svelte b/frontend/src/lib/components/common/badge/Badge.svelte index c57d41029c..ca26a9f841 100644 --- a/frontend/src/lib/components/common/badge/Badge.svelte +++ b/frontend/src/lib/components/common/badge/Badge.svelte @@ -2,6 +2,7 @@ import { twMerge } from 'tailwind-merge' import { type BadgeColor, type BadgeIconProps, ColorModifier } from './model' import { X } from 'lucide-svelte' + import { isCompactBadges } from './density' interface Props { color?: BadgeColor @@ -48,6 +49,7 @@ }: Props = $props() let hidden = $state(false) + const compact = isCompactBadges() const colors: Record = { gray: 'bg-surface-sunken text-primary', blue: 'bg-blue-50 text-blue-800 dark:text-blue-100 dark:bg-blue-700/40', @@ -126,7 +128,8 @@ : 'rounded-md px-2 py-0.5', verySmall ? 'px-0.5 py-0.5' : '', 'flex flex-row gap-1 items-center justify-center', - classNames + classNames, + compact ? 'text-3xs px-1 py-0 gap-0.5' : '' ) ) const handleHide = () => (hidden = !hidden) @@ -148,11 +151,19 @@ role={clickable ? 'button' : undefined} > {#if icon?.icon && icon.position === 'left'} - + + {/if} + {#if compact} + + + {@render children?.()} + + {:else} + {@render children?.()} {/if} - {@render children?.()} {#if icon?.icon && icon.position === 'right'} - + {/if} {#if dismissable}