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 () => {