root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-2647): constrain board header width behavior

Browse Source 
- Add desktop CSS constraints so column headers and titles can shrink without expanding board columns
- Prevent auto-merge toggle controls from shrinking to preserve stable header layout
- Add board CSS regression tests for the 6-column minmax grid template and header truncation rules
This commit is contained in:
Fusion
2026-04-26 23:53:22 -07:00
committed by gsxdsm
parent 864d55065b
commit 19171bc98e
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/dashboard/app/components/__tests__/board-mobile.test.tsx
View File

@@ -118,6 +118,24 @@ beforeEach(() => {
} }
}); });
describe("Board desktop column width CSS", () => {
it("keeps desktop board columns equal width via 6x minmax(300px, 1fr) grid", () => {
const css = loadAllAppCss();
expectRuleToContain(css, ".board", "grid-template-columns: repeat(6, minmax(300px, 1fr));");
});
it("constrains header content so actions cannot stretch column width", () => {
const css = loadAllAppCss();
expectRuleToContain(css, ".column-header", "min-width: 0;");
expectRuleToContain(css, ".column-header h2", "min-width: 0;");
expectRuleToContain(css, ".column-header h2", "overflow: hidden;");
expectRuleToContain(css, ".column-header h2", "text-overflow: ellipsis;");
expectRuleToContain(css, ".column-header h2", "white-space: nowrap;");
});
});
describe("Board and Column mobile CSS", () => { describe("Board and Column mobile CSS", () => {
it("contains .board scroll-snap-type: x mandatory in the mobile media block", () => { it("contains .board scroll-snap-type: x mandatory in the mobile media block", () => {
const css = loadAllAppCss(); const css = loadAllAppCss();

7
packages/dashboard/app/styles.css
View File

@@ -526,6 +526,7 @@ body {
align-items: center; align-items: center;
gap: var(--space-sm); gap: var(--space-sm);
padding: calc(var(--space-lg) - 2px) calc(var(--space-lg) - 2px) 0; padding: calc(var(--space-lg) - 2px) calc(var(--space-lg) - 2px) 0;
min-width: 0;
} }
.column-dot { .column-dot {
@@ -556,6 +557,10 @@ body {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
flex: 1; flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.column-count { .column-count {
@@ -2571,7 +2576,7 @@ input[type="range"]:focus-visible {
gap: 6px; gap: 6px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
margin-left: auto; flex-shrink: 0;
} }
.auto-merge-toggle input { .auto-merge-toggle input {