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

fix(FN-3010): widen quick entry model menu on desktop

Browse Source 
- Increase desktop nested model menu width baseline for better model-name readability
- Raise desktop width floor from 240px to 320px while preserving viewport clamping
- Replace hardcoded QuickEntryBox menu spacing/shadow/radius values with design tokens
- Update QuickEntryBox nested menu tests to assert the new desktop width behavior

Fusion-Task-Id: FN-3010
This commit is contained in:
Fusion
2026-04-29 21:57:38 -07:00
committed by gsxdsm
parent 91ad41e172
commit e571e701c9
3 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/dashboard/app/components/QuickEntryBox.css
View File

@@ -187,14 +187,14 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
margin-top: 4px; margin-top: var(--space-xs);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-lg);
z-index: 100; z-index: 100;
min-width: 240px; min-width: calc(var(--space-xl) * 12);
max-width: 320px; max-width: calc(var(--space-xl) * 20);
overflow: hidden; overflow: hidden;
} }
@@ -203,7 +203,7 @@
position: fixed; position: fixed;
margin-top: 0; margin-top: 0;
z-index: 1000; z-index: 1000;
max-width: 360px; max-width: calc(var(--space-xl) * 20);
} }
/* Mobile: portaled model menu uses wider viewport-clamped width set via inline styles */ /* Mobile: portaled model menu uses wider viewport-clamped width set via inline styles */
@@ -253,7 +253,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 120px; max-width: min(28ch, 100%);
} }
.model-submenu { .model-submenu {

5
packages/dashboard/app/components/QuickEntryBox.tsx
View File

@@ -664,13 +664,14 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
? Math.min(viewportHeight * 0.6, 360) ? Math.min(viewportHeight * 0.6, 360)
: Math.min(viewportHeight * 0.5, 360); : Math.min(viewportHeight * 0.5, 360);
const preferredDesktopWidth = Math.max(rect.width * 1.35, 320);
const preferredWidth = isMobile const preferredWidth = isMobile
? Math.min(viewportWidth - horizontalPadding * 2, 360) ? Math.min(viewportWidth - horizontalPadding * 2, 360)
: Math.max(rect.width, 240); : preferredDesktopWidth;
const width = Math.min( const width = Math.min(
preferredWidth, preferredWidth,
Math.max(viewportWidth - horizontalPadding * 2, 200), Math.max(viewportWidth - horizontalPadding * 2, 240),
); );
const triggerTop = rect.top - offsetTop; const triggerTop = rect.top - offsetTop;

10
packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
View File

@@ -2414,7 +2414,7 @@ describe("QuickEntryBox", () => {
expect(menuLeft + menuWidth).toBeLessThanOrEqual(viewportWidth - 16); expect(menuLeft + menuWidth).toBeLessThanOrEqual(viewportWidth - 16);
}); });
it("uses desktop width (trigger-based) on non-mobile viewports", () => { it("uses wider desktop width on non-mobile viewports", () => {
// Default test environment has a wider viewport // Default test environment has a wider viewport
vi.spyOn(window, "innerWidth", "get").mockReturnValue(1024); vi.spyOn(window, "innerWidth", "get").mockReturnValue(1024);
@@ -2425,9 +2425,9 @@ describe("QuickEntryBox", () => {
const menu = screen.getByTestId("model-nested-menu"); const menu = screen.getByTestId("model-nested-menu");
const menuWidth = parseFloat(menu.style.width); const menuWidth = parseFloat(menu.style.width);
// On desktop, width should be at least 240 (minimum) and at most 360 (max-width) // Desktop menu now has a wider baseline for model readability.
expect(menuWidth).toBeGreaterThanOrEqual(240); expect(menuWidth).toBeGreaterThanOrEqual(320);
expect(menuWidth).toBeLessThanOrEqual(360); expect(menuWidth).toBeLessThanOrEqual(480);
}); });
it("repositions with mobile width on resize from desktop to mobile", () => { it("repositions with mobile width on resize from desktop to mobile", () => {
@@ -2441,7 +2441,7 @@ describe("QuickEntryBox", () => {
// Desktop width // Desktop width
const desktopWidth = parseFloat(menu.style.width); const desktopWidth = parseFloat(menu.style.width);
expect(desktopWidth).toBeGreaterThanOrEqual(240); expect(desktopWidth).toBeGreaterThanOrEqual(320);
// Simulate resize to mobile // Simulate resize to mobile
innerWidthSpy.mockReturnValue(375); innerWidthSpy.mockReturnValue(375);