6fd49f78c8
Keep long structure selections within the shared Messages composer on narrow layouts. - Make structure picker controls shrinkable and full-width in mobile stacks. - Cover long-label attachment behavior and shared full-page/modal callers. - Add a patch changeset for the mobile containment fix. Files changed: .../fn-8820-message-composer-mobile-width.md | 7 +++++ .../dashboard/app/components/MessageComposer.css | 17 +++++++++++ .../__tests__/MessageComposer.mobile-width.test.ts | 34 ++++++++++++++++++++++ .../components/__tests__/MessageComposer.test.tsx | 14 +++++++++ 4 files changed, 72 insertions(+) Fusion-Task-Id: FN-8820 Fusion-Task-Lineage: a66d51a6-6d92-4402-938c-698c09177583 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { loadComponentCss, readAppFile } from "../../test/cssFixture";
|
|
|
|
function getRuleBlock(css: string, selector: string) {
|
|
const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
return css.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`))?.[1] ?? "";
|
|
}
|
|
|
|
describe("MessageComposer mobile structure picker width", () => {
|
|
const css = loadComponentCss("MessageComposer.css");
|
|
|
|
it("keeps the long-label select shrinkable in the shared desktop base rule", () => {
|
|
const selectRule = getRuleBlock(css, ".message-composer-structure-controls .message-composer-select");
|
|
|
|
expect(selectRule).toMatch(/min-width\s*:\s*0/);
|
|
expect(selectRule).toMatch(/width\s*:\s*100%/);
|
|
expect(selectRule).toMatch(/max-width\s*:\s*100%/);
|
|
});
|
|
|
|
it("fills the stacked mobile field without a caller-specific Messages patch", () => {
|
|
const mobileCss = css.slice(css.indexOf("@media (max-width: 768px)"));
|
|
const mobileFieldRule = getRuleBlock(mobileCss, ".message-composer-field--structures,\n .message-composer-structure-controls");
|
|
|
|
expect(mobileFieldRule).toMatch(/min-width\s*:\s*0/);
|
|
expect(mobileFieldRule).toMatch(/width\s*:\s*100%/);
|
|
expect(mobileFieldRule).toMatch(/max-width\s*:\s*100%/);
|
|
|
|
for (const caller of ["MailboxView.tsx", "MailboxModal.tsx"]) {
|
|
const source = readAppFile(`components/${caller}`);
|
|
expect(source).toContain('from "./MessageComposer"');
|
|
expect(source).toContain("nativeStructureCandidates={nativeStructureCandidates}");
|
|
}
|
|
});
|
|
});
|