banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(browser-hint-overlay): update overlay styles for improved layout and responsiveness

Browse Source
This commit is contained in:
chenhang
2026-07-13 16:14:11 +08:00
parent 19857e8b9b
commit 754effa2b3
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/chat/components/__tests__/tailwind-components.test.tsx
+4
View File
@@ -206,6 +206,10 @@ describe("chat Tailwind components", () => {
expect(html).toContain('aria-expanded="true"'); expect(html).toContain('aria-expanded="true"');
expect(html).toContain('aria-label="Open elsewhere. Better experience"'); expect(html).toContain('aria-label="Open elsewhere. Better experience"');
expect(html).toContain("grid-cols-[auto_minmax(0,1fr)]"); expect(html).toContain("grid-cols-[auto_minmax(0,1fr)]");
expect(html).toContain(
"right-[calc(var(--spacing-md,12px)+var(--responsive-icon-button-size,42px)+var(--spacing-sm,8px))]",
);
expect(html).toContain("max-w-[min(58vw,220px)]");
expect(html).toContain("backdrop-blur-md"); expect(html).toContain("backdrop-blur-md");
expect(html).toContain("hover:opacity-94"); expect(html).toContain("hover:opacity-94");
expect(html).toContain("Open elsewhere"); expect(html).toContain("Open elsewhere");
src/app/chat/components/browser-hint-overlay.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const DEFAULT_TITLE = "Open in external browser";
const DEFAULT_DESCRIPTION = "Find me more easily"; const DEFAULT_DESCRIPTION = "Find me more easily";
const DEFAULT_AUTO_COLLAPSE_DELAY_MS = 3500; const DEFAULT_AUTO_COLLAPSE_DELAY_MS = 3500;
const OVERLAY_BASE_CLASS_NAME = const OVERLAY_BASE_CLASS_NAME =
"pointer-events-auto absolute right-(--spacing-2,8px) top-(--spacing-2,8px) z-20 box-border min-h-12 max-w-[min(74vw,260px)] cursor-pointer border border-[rgba(255,255,255,0.18)] bg-[linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04)),var(--color-blur-background,rgba(13,11,20,0.86))] text-white shadow-[0_12px_28px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.16)] backdrop-blur-md backdrop-saturate-120 transition-[border-color,box-shadow,opacity,padding,transform] duration-180 [-webkit-tap-highlight-color:transparent] hover:-translate-y-px hover:border-[rgba(255,255,255,0.28)] hover:opacity-94 hover:shadow-[0_14px_32px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.18)] active:translate-y-px active:scale-99 active:opacity-88 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[rgba(255,255,255,0.88)]"; "pointer-events-auto absolute right-[calc(var(--spacing-md,12px)+var(--responsive-icon-button-size,42px)+var(--spacing-sm,8px))] top-(--spacing-2,8px) z-20 box-border min-h-12 max-w-[min(58vw,220px)] cursor-pointer border border-[rgba(255,255,255,0.18)] bg-[linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04)),var(--color-blur-background,rgba(13,11,20,0.86))] text-white shadow-[0_12px_28px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.16)] backdrop-blur-md backdrop-saturate-120 transition-[border-color,box-shadow,opacity,padding,transform] duration-180 [-webkit-tap-highlight-color:transparent] hover:-translate-y-px hover:border-[rgba(255,255,255,0.28)] hover:opacity-94 hover:shadow-[0_14px_32px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.18)] active:translate-y-px active:scale-99 active:opacity-88 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[rgba(255,255,255,0.88)]";
const OVERLAY_EXPANDED_CLASS_NAME = const OVERLAY_EXPANDED_CLASS_NAME =
"grid w-fit grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-[18px] px-2.5 py-2"; "grid w-fit grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-[18px] px-2.5 py-2";
const OVERLAY_COLLAPSED_CLASS_NAME = const OVERLAY_COLLAPSED_CLASS_NAME =