From 53685f82130fb1d575530b04e317734ad24ac755 Mon Sep 17 00:00:00 2001 From: Fusion Date: Fri, 17 Apr 2026 20:31:53 -0700 Subject: [PATCH] fix(FN-2041): reduce Quick Chat FAB desktop edge margin - Change QuickChatFAB desktop drag clamp margin from 48px to 8px while keeping the 4px mobile margin - Update QuickChatFAB drag boundary tests and descriptions to assert the new 8px desktop behavior - Add a patch changeset for @gsxdsm/fusion documenting the FAB edge margin reduction --- .changeset/reduce-chat-fab-edge-margin.md | 5 +++++ packages/dashboard/app/components/QuickChatFAB.tsx | 2 +- .../app/components/__tests__/QuickChatFAB.test.tsx | 14 +++++++------- 3 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/reduce-chat-fab-edge-margin.md diff --git a/.changeset/reduce-chat-fab-edge-margin.md b/.changeset/reduce-chat-fab-edge-margin.md new file mode 100644 index 000000000..60f123911 --- /dev/null +++ b/.changeset/reduce-chat-fab-edge-margin.md @@ -0,0 +1,5 @@ +--- +"@gsxdsm/fusion": patch +--- + +Reduce Quick Chat FAB desktop edge margin from 48px to 8px, allowing users to drag the chat icon closer to the screen edge on desktop viewports. \ No newline at end of file diff --git a/packages/dashboard/app/components/QuickChatFAB.tsx b/packages/dashboard/app/components/QuickChatFAB.tsx index 0ac06aed6..cfb18dc77 100644 --- a/packages/dashboard/app/components/QuickChatFAB.tsx +++ b/packages/dashboard/app/components/QuickChatFAB.tsx @@ -170,7 +170,7 @@ function useDraggable(projectId?: string, externalDidDragRef?: React.MutableRefO const fabSize = 48; // FAB is 48x48px // Mobile uses tighter margin (4px) to maximize screen space on small devices - const edgeMargin = window.innerWidth <= 768 ? 4 : 48; + const edgeMargin = window.innerWidth <= 768 ? 4 : 8; // Account for mobile nav height when clamping bottom const mobileNavHeight = window.innerWidth <= 768 ? 44 : 0; // Account for executor footer height on desktop diff --git a/packages/dashboard/app/components/__tests__/QuickChatFAB.test.tsx b/packages/dashboard/app/components/__tests__/QuickChatFAB.test.tsx index dfe073622..ecf41828c 100644 --- a/packages/dashboard/app/components/__tests__/QuickChatFAB.test.tsx +++ b/packages/dashboard/app/components/__tests__/QuickChatFAB.test.tsx @@ -937,10 +937,10 @@ describe("QuickChatFAB", () => { pointerId: 1, }); - // Desktop: position should be clamped to at least 48px from edges + // Desktop: position should be clamped to at least 8px from edges const savedPosition = JSON.parse(localStorageMock.setItem.mock.calls[0]?.[1] || "{}"); - expect(savedPosition.x).toBeGreaterThanOrEqual(48); - expect(savedPosition.y).toBeGreaterThanOrEqual(48); + expect(savedPosition.x).toBeGreaterThanOrEqual(8); + expect(savedPosition.y).toBeGreaterThanOrEqual(8); }); it("on mobile viewport, FAB can be dragged to within 4px of the edge", async () => { @@ -980,7 +980,7 @@ describe("QuickChatFAB", () => { expect(savedPosition.y).toBeGreaterThanOrEqual(4); }); - it("on desktop viewport, FAB edge margin remains 48px", async () => { + it("on desktop viewport, FAB edge margin is 8px", async () => { // Explicitly set desktop viewport (1024px wide, which is > 768px) Object.defineProperty(window, "innerWidth", { value: 1024, writable: true }); Object.defineProperty(window, "innerHeight", { value: 768, writable: true }); @@ -1011,10 +1011,10 @@ describe("QuickChatFAB", () => { pointerId: 1, }); - // Desktop: position should be clamped to at least 48px from edges + // Desktop: position should be clamped to at least 8px from edges const savedPosition = JSON.parse(localStorageMock.setItem.mock.calls[0]?.[1] || "{}"); - expect(savedPosition.x).toBeGreaterThanOrEqual(48); - expect(savedPosition.y).toBeGreaterThanOrEqual(48); + expect(savedPosition.x).toBeGreaterThanOrEqual(8); + expect(savedPosition.y).toBeGreaterThanOrEqual(8); }); it("touch events work for dragging", async () => {