feat(canvas): add narrow-screen A2UI layout overrides

This commit is contained in:
Ayaan Zaidi
2026-02-25 11:15:27 +05:30
committed by Ayaan Zaidi
parent 35a4641bb6
commit f701224a69

View File

@@ -32,6 +32,66 @@ if (modalElement && Array.isArray(modalElement.styles)) {
modalElement.styles = [...modalElement.styles, modalStyles];
}
const appendComponentStyles = (tagName, extraStyles) => {
const component = customElements.get(tagName);
if (!component) {
return;
}
const current = component.styles;
if (!current) {
component.styles = [extraStyles];
return;
}
component.styles = Array.isArray(current) ? [...current, extraStyles] : [current, extraStyles];
};
appendComponentStyles(
"a2ui-row",
css`
@media (max-width: 860px) {
section {
flex-wrap: wrap;
align-content: flex-start;
}
::slotted(*) {
flex: 1 1 100%;
min-width: 100%;
width: 100%;
max-width: 100%;
}
}
`,
);
appendComponentStyles(
"a2ui-column",
css`
:host {
min-width: 0;
}
section {
min-width: 0;
}
`,
);
appendComponentStyles(
"a2ui-card",
css`
:host {
min-width: 0;
}
section {
min-width: 0;
}
`,
);
const emptyClasses = () => ({});
const textHintStyles = () => ({ h1: {}, h2: {}, h3: {}, h4: {}, h5: {}, body: {}, caption: {} });