feat(CnCard): add footer support, grid header layout, icon slot, and smart tooltip#18
Merged
SudoThijn merged 6 commits intodevelopmentfrom Mar 30, 2026
Conversation
…le tooltip Refactors CnCard header from flexbox to CSS grid (1fr auto, 2 rows) so labels always span full width beneath the title/actions row, preventing stacking issues. Adds footer section to CnCard with footerLinks and tags props, rendered as clickable anchor links and small CnStatusBadge tags separated by a border. Implements a smart tooltip on the title: uses a ResizeObserver to detect when text is ellipsized and only shows the tooltip in that case, avoiding redundant tooltips on untruncated titles. Moves labels slot outside the <h2> element to the header container level so they participate correctly in the grid layout. Removes the active background color from CnCard — the active border alone now indicates the active state, avoiding incorrect CSS variable usage. Adds icon slot support to CnStatusBadge and gap spacing between icon and label text. Fixes solid default badge to use --color-background-dark with main text color instead of maxcontrast white, for better theme compatibility.
…eature/REGISTERS-482/changes-for-configuration-page
…eature/REGISTERS-482/changes-for-configuration-page
Base automatically changed from
feature/REGISTERS-481/changes-for-entities-page
to
development
March 30, 2026 09:52
remko48
approved these changes
Mar 30, 2026
SudoThijn
deleted the
feature/REGISTERS-482/changes-for-configuration-page
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Enhances
CnCardandCnStatusBadgewith features needed for the configuration page.CnCard
footerLinks(array of{ url, label }) andtags(strings or{ text, variant }objects) props render a bordered footer area with links andCnStatusBadgetags; fully overridable via#footerslotResizeObserver);titleTooltipprop still overrides this behaviourborder-bottomon the card headerCnStatusBadge
#iconslot inside the default slot for rendering an icon alongside badge textgapspacing in CSS between icon and labeldefaultvariant — changed background from--color-text-maxcontrast(too dark) to--color-background-darkwith--color-main-textfor correct contrastBased off of: #17