fix(chat): a2ui catalog layout polish (component-scoped CSS)#230
Merged
Conversation
Replace inert Tailwind utility class strings with Angular component-scoped styles: blocks on all 18 a2ui catalog components. No Tailwind compiler is configured in this workspace so those class names were silently ignored, causing visible layout breakage (label+input running together, headings rendering inline at body size, Column/Row/List/Card having no flex gap, etc.). Each component now carries its own BEM-style CSS that faithfully reproduces the original layout intent: flex-column wrappers with 4px gap on TextField, DateTimeInput, Slider, MultipleChoice; flex-row on Row; flex-column on Column and List; padding/border/radius on all input-like elements; block-level display and correct font-size/weight hierarchy on Text h1-h5/caption/body; visible padding and hover states on Button; border+padding on Card and Modal. Column and Row convert the numeric `gap` and `alignment` inputs to real CSS via inline [style] bindings rather than gap-N Tailwind shorthand. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Problem
All 18
@ngaf/chata2ui catalog components used Tailwind utility class strings (flex flex-col gap-1,text-3xl font-bold,rounded-lg px-3 py-2,bg-blue-600, etc.) in their templates. This workspace has no Tailwind compiler configured — notailwind.config.*, no@tailwinddirectives — so every one of those class names was silently inert. The result was visible layout breakage in every rendered surface:h1–h5headings rendered as inline<span>at body font size; no block display, no size, no weightSolution
Added an Angular
styles: [...]block to each@Componentdecorator — no new dependencies, no toolchain changes. Each component now carries its own BEM-style component-scoped CSS that reproduces the intended layout:TextField,Slider,DateTimeInput,MultipleChoice:display:flex; flex-direction:column; gap:4pxwrapper; full padding/border/border-radius/focus state on inputsText: block display perusageHintwith correctfont-size+font-weightforh1–h5, muted color forcaption, readableline-heightforbodyColumn/Row: convert the numericgapandalignmentinputs to real CSS via[style.gap.px]/[style.align-items]/[style.justify-content]bindings (Tailwind'sgap-Nshorthand was not resolvable at runtime)List: two named classes (a2ui-list--vertical/a2ui-list--horizontal) replacing the computed Tailwind stringCard: rounded border + padding + background via--a2ui-card-bgCSS variableButton: visible primary/secondary states with hover, padding, border-radius, disabled opacityTabs: tab strip with bottom-border indicator, active colour, hover state, panel paddingModal: fixed overlay + backdrop blur + panel sizing via real CSS classesCheckBox,Icon,Image,Audio,Video,Divider: simpler layout fixes (block/inline-flex,width:100%, border rules)All
--a2ui-*CSS variables from the existing palette (--a2ui-primary,--a2ui-border,--a2ui-label,--a2ui-input-bg,--a2ui-input-text) are reused as fallback defaults throughout.Verification
Components touched
audio-playerw-full→.a2ui-audio { display:block; width:100% }buttoncardcheck-boxcolumn[style.align-items]+[style.gap.px]date-time-inputdividerborder-white/10→ realborder-top/ background CSSiconinline-flex items-center justify-center select-none→ component CSSimagemax-w-full rounded→ component CSSlistmodalmultiple-choicerow[style.justify-content]+[style.align-items]+[style.gap.px]sliderwidth:100%range with accent-colortabstext-fieldtextvideow-full rounded-lg→ component CSS🤖 Generated with Claude Code