feat(ai-chat): wider default window, larger max size, smaller font
Make the floating AI chat window open at a larger default size and allow stretching it further, plus shrink the fonts. - ai-chat-window.tsx: DEFAULT_WIDTH 362->540, DEFAULT_HEIGHT 602->680; clamp the default width to the viewport in computeInitialGeom() (symmetric with the existing height clamp) to avoid overflow on narrow screens. - ai-chat-window.module.css: raise resize caps (max-width 560->900px, max-height 880->1100px); base font-size 12->11px. - ai-chat.module.css: chat content font .messages sm->xs.
This commit is contained in:
@@ -24,9 +24,9 @@
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
min-height: 400px;
|
||||
max-width: 560px;
|
||||
max-height: 880px;
|
||||
font-size: 12px;
|
||||
max-width: 900px;
|
||||
max-height: 1100px;
|
||||
font-size: 11px;
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
||||
}
|
||||
|
||||
|
||||
@@ -40,9 +40,10 @@ import { useClipboard } from "@/hooks/use-clipboard";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import classes from "@/features/ai-chat/components/ai-chat-window.module.css";
|
||||
|
||||
// Default window geometry (from the GitmostAgent.jsx design).
|
||||
const DEFAULT_WIDTH = 362;
|
||||
const DEFAULT_HEIGHT = 602;
|
||||
// Default window dimensions (wider default per user request); both are
|
||||
// clamped to the viewport in computeInitialGeom().
|
||||
const DEFAULT_WIDTH = 540;
|
||||
const DEFAULT_HEIGHT = 680;
|
||||
// CSS-enforced minimum window size (ai-chat-window.module.css). The geometry
|
||||
// math must respect these so the real box is clamped within the viewport.
|
||||
const MIN_WIDTH = 300;
|
||||
@@ -60,7 +61,10 @@ function formatTokens(n: number): string {
|
||||
// Compute the initial top-right placement at the default size, fitted to the
|
||||
// current viewport. Reads `window` only when called (inside an effect).
|
||||
function computeInitialGeom() {
|
||||
const width = DEFAULT_WIDTH;
|
||||
const width = Math.max(
|
||||
MIN_WIDTH,
|
||||
Math.min(DEFAULT_WIDTH, window.innerWidth - 2 * EDGE_MARGIN),
|
||||
);
|
||||
const height = Math.max(
|
||||
MIN_HEIGHT,
|
||||
Math.min(DEFAULT_HEIGHT, window.innerHeight - 2 * EDGE_MARGIN),
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
min-height: 0;
|
||||
/* Smaller, denser chat text (cascades into user bubble + assistant markdown
|
||||
+ tool cards; the explicit-size Mantine labels keep their own size). */
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
}
|
||||
|
||||
.messageRow {
|
||||
|
||||
Reference in New Issue
Block a user