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

- 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

packages/dashboard/app/components/QuickEntryBox.css

@@ -187,14 +187,14 @@
   position: absolute;
   top: 100%;
   left: 0;
-  margin-top: 4px;
+  margin-top: var(--space-xs);
   background: var(--bg-secondary);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
   z-index: 100;
-  min-width: 240px;
-  max-width: 320px;
+  min-width: calc(var(--space-xl) * 12);
+  max-width: calc(var(--space-xl) * 20);
   overflow: hidden;
 }
 
@@ -203,7 +203,7 @@
   position: fixed;
   margin-top: 0;
   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 */
@@ -253,7 +253,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 120px;
+  max-width: min(28ch, 100%);
 }
 
 .model-submenu {

packages/dashboard/app/components/QuickEntryBox.tsx

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

packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx

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