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:
gsxdsm
2026-06-14 10:11:54 -07:00
parent 1f540b29d7
commit 6cc873e23f
2 changed files with 14 additions and 0 deletions

View File

@@ -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);
}

View File

@@ -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);