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

fix(FN-2041): reduce Quick Chat FAB desktop edge margin

Browse Source 
- 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
This commit is contained in:
Fusion
2026-04-17 20:31:53 -07:00
committed by gsxdsm
parent a0cf637c66
commit 0a89068ef0
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard/app/components/QuickChatFAB.tsx
View File

@@ -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

14
packages/dashboard/app/components/__tests__/QuickChatFAB.test.tsx
View File

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