FN-6446: make Secrets view fill mobile width
Ensure the Secrets page root expands within the project content flex row on narrow screens. - Let the Secrets view root flex to available width with a zero min-width. - Preserve existing height and spacing behavior while avoiding intrinsic card-width collapse. - Cover the mobile layout contract with a root-container CSS assertion. Files changed: packages/dashboard/app/components/SecretsView.css | 7 +++++++ .../dashboard/app/components/__tests__/SecretsView.mobile.test.tsx | 7 +++++++ 2 files changed, 14 insertions(+) Fusion-Task-Id: FN-6446 Fusion-Task-Lineage: 34f55d8e-ee57-432c-b1ce-165cc43333ee
This commit is contained in:
@@ -1,7 +1,14 @@
|
||||
/*
|
||||
FNXC:SecretsView 2026-06-14-10:02:
|
||||
The standalone Secrets page is mounted as a flex item inside the .project-content row on mobile and desktop. Grow and zero the min-width here so the page fills the viewport width instead of collapsing to intrinsic secret-card content (FN-6446); keep height behavior unchanged so the Settings modal section does not gain nested scrolling.
|
||||
*/
|
||||
.secrets-view {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
padding-block: var(--space-md);
|
||||
padding-inline: var(--space-xl);
|
||||
}
|
||||
|
||||
@@ -126,6 +126,13 @@ describe("SecretsView mobile layout contracts", () => {
|
||||
expect(normalizedCss).not.toMatch(/\b\d+px\b/);
|
||||
});
|
||||
|
||||
it("grows the root container to fill the project-content flex row", () => {
|
||||
const rootBlock = extractRuleBlock(secretsViewCss, ".secrets-view");
|
||||
|
||||
expect(rootBlock).toMatch(/flex\s*:\s*1\s+1\s+auto/);
|
||||
expect(rootBlock).toMatch(/width\s*:\s*100%/);
|
||||
});
|
||||
|
||||
it("keeps the mobile media block free of button and modal-close overrides", () => {
|
||||
const mobileCss = extractMobileMediaBlocks(secretsViewCss);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user