mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: card the badge popover body and lay the allowed-domains badges out in a wrapping row

Browse source
This commit is contained in:
iris 2026-11-04 08:13:25 +01:00 • committed by mara
commit c5eb13f826
2 changed files with 25 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx
View file

@ -136,10 +136,11 @@ export function AllowedDomains({ agent }: { agent: string }) {
return ( return (
<div class="ui-agent-limits"> <div class="ui-agent-limits">
{errorPanel} {errorPanel}
{shown.length === 0 ? ( <div class="ui-badge-popover-row">
<Badge label="allowed domains" value="none added" /> {shown.length === 0 ? (
) : null} <Badge label="allowed domains" value="none added" />
{entryGroups(shown).map((g) => ( ) : null}
{entryGroups(shown).map((g) => (
<BadgePopover <BadgePopover
key={g.source} key={g.source}
label={GROUP_LABEL[g.source]} label={GROUP_LABEL[g.source]}
@ -168,12 +169,13 @@ export function AllowedDomains({ agent }: { agent: string }) {
</ul> </ul>
</BadgePopover> </BadgePopover>
))} ))}
<Badge <Badge
variant="quiet" variant="quiet"
value="add" value="add"
title={`allow a domain for ${agent} or for every agent`} title={`allow a domain for ${agent} or for every agent`}
onClick={() => setAdding(true)} onClick={() => setAdding(true)}
/> />
</div>
<Dialog <Dialog
open={adding} open={adding}
onClose={() => setAdding(false)} onClose={() => setAdding(false)}

18
frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css
View file

@ -1,4 +1,5 @@
/* <BadgePopover> — the box a badge opens under itself. */ /* <BadgePopover> — the box a badge opens under itself. The popover only
floats, so the body brings the card. */
.ui-badge-popover { .ui-badge-popover {
display: inline-block; display: inline-block;
} }
@ -7,10 +8,10 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 0.4em; gap: 0.4em;
padding: 0.5em 0.75em; padding: 0.75em 1em;
max-width: min(32em, 90vw); border: 1px solid var(--border);
max-height: 60vh; border-radius: 0.5em;
overflow-y: auto; background: var(--bg-elev);
} }
.ui-badge-popover-help { .ui-badge-popover-help {
margin: 0; margin: 0;
@ -24,3 +25,10 @@
display: grid; display: grid;
gap: 0.3em; gap: 0.3em;
} }
/* A line of badge popovers that wraps when it runs out of room. */
.ui-badge-popover-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4em;
}