fix: bookmark widget sizing, generic globe icon, code-server brand icon

- multi-link bookmark cards now span 4/2 (matching the system widget)
  instead of 3/1, so they're not cramped and line up into an even
  3-up row alongside it
- the link list scrolls internally instead of stretching the card,
  so widgets in the same row stay equal height regardless of link count
- BrandIcon gains a small "generic icon" escape hatch (currently just
  `globe`, via phosphor) for widgets that don't have a real brand mark
- added a `coder` brand icon (Coder/code-server) for the Code Server link,
  since simple-icons has no official VS Code mark to use

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WpxhtQY3CExQdMs4j7MmJe
This commit is contained in:
2026-08-18 10:26:45 +02:00
co-authored by Claude Sonnet 5
parent d980e68577
commit 7549658fbb
4 changed files with 17 additions and 2 deletions
+2 -2
View File
@@ -8,13 +8,13 @@ type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
if (widget.links && widget.links.length > 0) {
return (
<div className={PN_CARD_CLASS} style={{ gridColumn: "span 3" }}>
<div className={PN_CARD_CLASS} style={{ gridColumn: "span 4", gridRow: "span 2" }}>
<div className="flex items-center gap-2">
<BrandIcon slug={widget.icon} />
<span className="min-w-0 flex-1 truncate text-[15px] font-medium text-fg">{widget.name}</span>
</div>
{widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
<div className="-mx-1 flex flex-col divide-y divide-border">
<div className="-mx-1 flex min-h-0 flex-1 flex-col divide-y divide-border overflow-y-auto">
{widget.links.map((link) => (
<a
key={link.href}