Skip to content

Board: let a BoardItemTitle inside an item body render in the item header #108

Closed

Description

@agatha197

Summary

Let content inside a Board item put its title row in the item header, and tell content whether it is rendered inside a board item.

Why

Board items take a title node and a description (#68). backend.ai-webui renders each dashboard card as one component whose title row (title, help tooltip, header controls, a "View all" link) is built by the card itself, from data the board does not have. To get that row into the board header without restructuring every card, webui currently:

  • passes an empty placeholder node as every item's title, wraps the description in its own context, and lets BoardItemTitle inside the body createPortal itself into the placeholder (packages/backend.ai-ui/src/components/BAIBoardItemTitleSlot.tsx, BAIBoard.tsx, BAIBoardItemTitle.tsx);
  • hides an empty header and re-pads the content by targeting Board internals: .uic-board-item__header:has(> .uic-board-item__title > …:empty) and + .uic-board-item__content { padding-block-start: var(--board-item-padding-top) } (BAIBoard.css);
  • strips the injected title / description back out of onItemsChange so they are not persisted;
  • branches in eight card components on "am I inside a board item?" to drop their own inset.

The CSS depends on Board's private DOM and will break silently when it changes.

Proposal

  • Export a BoardItemContext / useIsInBoardItem() from Board, true inside an item's description.
  • When a BoardItemTitle renders inside an item's description and the item has no title, render it in that item's header (same layout and drag-handle alignment as a title node). An inline prop keeps it in the body when wanted (e.g. a second section title).
  • When an item has neither a title nor a body BoardItemTitle, render no header row and keep the board's top padding on the content.

Expected

  • webui keeps BAIBoard / BAIBoardItemTitle as thin adapters and deletes the portal slot, the .uic-board-item__* CSS and the onItemsChange stripping.
  • Moving or resizing an item never duplicates its title row.

Consumer: lablup/backend.ai-webui#10627 (dashboard card headers).

Activity

  1. added theissue type on Oct 28, 2026
  2. self-assigned this
    on Oct 28, 2026
  3. agatha197 commented on Oct 28, 2026

    @agatha197
    ContributorAuthor

    Resolved by #113 (tracked there as #111). backend.ai-webui dropped its title-slot workaround on this release in lablup/backend.ai-webui#10627.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions