Aleksander Grygier
dc9e3bed42
* ui : land opened conversations at their bottom before the first paint Pin the page to its bottom with a ResizeObserver until it stops resizing or the reader interacts, and mount the last rows eagerly so the landing frame shows real content. Assisted by: Claude (Opus 5.5 Medium) * ui : make conversation tabs browser-style A plain navigation shows the chat in the current tab instead of adding one, and the new-chat tab turns into the conversation it starts. New tabs come only from explicit actions: the + button, Cmd/Ctrl-click or middle-click on a sidebar chat, and its Open in new tab menu item, which open in the background. Closing a tab moves to its neighbour among the tabs the view shows. Assisted by: Claude (Opus 5.5 Medium) * ui : share the tab surface and tab bar fade styles Move the tab item surface (shape, resting and active looks) to TAB_SURFACE_* class constants and the fade under the tab bar to a global chat-top-fade class, so other elements can match the tabs. Assisted by: Claude (Opus 5.5 Medium) * ui : fit the chat column below the tab bar The tab bar reported 1.25rem of its height while it takes 3.3125rem (pt-3.25 + h-10), so a short conversation still left a few pixels to scroll. Use the bar's full height and drop the extra 1rem from the column's minimum height, so it fills the viewport exactly; the centered new-chat form moves up by the same 1rem to keep its place. Assisted by: Claude (Opus 5.5 Medium) * ui : stop the page from bouncing past its ends Elastic overscroll on the root scroller dragged the sticky and fixed bars (tab bar, chat form) along at the top and bottom of a chat, and they jumped back on release. Set overscroll-behavior: none on html and body. Assisted by: Claude (Opus 5.5 Medium) * ui : stop scrolled dialogs from bouncing past their ends Dialogs scroll on their own (the settings panel, the search results), so the page rule did not reach them and their sticky navigation still jumped on overscroll. Turn off overscroll on dialog panels and on the scroll containers inside them. Only scroll containers: Firefox counts an overflow-hidden box such as truncated text as one, and `none` there kept the wheel from scrolling the list around it. Assisted by: Claude (Opus 5.5 Medium) * ui : fit a first exchange opened by the working directory row The last answer's minimum height leaves room for the last question only, so the synthetic row that a new chat starts with (Set working directory to ...) made a short first exchange overflow by that row. When everything above the last question is synthetic, count those rows as part of it. Assisted by: Claude (Opus 5.5 Medium) * ui : keep following a streaming response until the reader scrolls up Auto-scroll stopped whenever the page moved up, including moves the reader did not make: scroll anchoring and blocks re-rendering shorter while a response streams. Only the reader's wheel, touch, scroll keys or scrollbar drag now count as scrolling up. The send scroll also looked up the new user bubble by position, which picked an older message when the answer row had not rendered yet. Assisted by: Claude (Opus 5.5 Medium) * ui : fade the chat form between its centered and bottom positions The form no longer slides across the column between the new-chat center and the bottom. It fades out drifting toward where it goes and fades back in where it lands, quicker when opening a chat than when going back to a new one. Its wrapper keeps the same height in both positions, so the messages never shift while it moves. The new-chat greeting fades in as the form settles, also on a refresh or a first visit. Reduced motion keeps only the fades. Assisted by: Claude (Opus 5.5 Medium)
285 lines
8.1 KiB
CSS
285 lines
8.1 KiB
CSS
@import 'tailwindcss';
|
|
@source '.';
|
|
@plugin '@tailwindcss/forms';
|
|
@plugin '@tailwindcss/typography';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* shadcn components key their orientation styles off these, toggle-group among them */
|
|
@custom-variant data-horizontal (&[data-orientation='horizontal']);
|
|
@custom-variant data-vertical (&[data-orientation='vertical']);
|
|
|
|
/*
|
|
* Tailwind v4 dropped the pointer cursor from buttons. Every control a user can
|
|
* press gets it back, and anything disabled keeps the cursor its own class asks for.
|
|
*/
|
|
@layer base {
|
|
button:not(:disabled),
|
|
[role='button']:not([data-disabled]),
|
|
[role='checkbox']:not([data-disabled]),
|
|
[role='combobox']:not([data-disabled]),
|
|
[role='menuitem']:not([data-disabled]),
|
|
[role='menuitemcheckbox']:not([data-disabled]),
|
|
[role='menuitemradio']:not([data-disabled]),
|
|
[role='option']:not([data-disabled]),
|
|
[role='radio']:not([data-disabled]),
|
|
[role='switch']:not([data-disabled]),
|
|
[role='tab']:not([data-disabled]),
|
|
label[for],
|
|
select,
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.625rem;
|
|
/* expanded desktop sidebar width, overridden once the user drags its edge */
|
|
--sidebar-width: 18rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.95 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.95 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.875 0 0);
|
|
--input: oklch(0.92 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
--code-background: oklch(0.985 0 0);
|
|
--code-foreground: oklch(0.145 0 0);
|
|
--font-mono:
|
|
ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
|
|
'Liberation Mono', Menlo, monospace;
|
|
--layer-popover: 1000000;
|
|
|
|
--chat-form-area-height: 8rem;
|
|
--chat-form-area-offset: 2rem;
|
|
--chat-form-padding-top: 6rem;
|
|
--max-message-height: max(24rem, min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem)));
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
:root {
|
|
--chat-form-area-height: 24rem;
|
|
--chat-form-area-offset: 12rem;
|
|
--chat-form-padding-top: 6rem;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.16 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.922 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.29 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 30%);
|
|
--input: oklch(1 0 0 / 30%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.2 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
--code-background: oklch(0.225 0 0);
|
|
--code-foreground: oklch(0.875 0 0);
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
scrollbar-width: thin;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* no elastic bounce past the ends of the page: it drags the sticky and
|
|
fixed bars (tab bar, chat form) along and they jump back on release */
|
|
html,
|
|
body {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* same for dialogs, whose panels and lists scroll on their own with sticky
|
|
headers and footers. Scroll containers only: Firefox treats an
|
|
overflow-hidden box (truncated text) as one, and with `none` it would
|
|
keep the wheel from reaching the list around it */
|
|
:is([role='dialog'], [role='alertdialog']),
|
|
:is([role='dialog'], [role='alertdialog'])
|
|
:is(.overflow-auto, .overflow-y-auto, [data-slot='scroll-area-viewport']) {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* Global scrollbar styling - visible only on hover */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
}
|
|
|
|
*:hover {
|
|
scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
*:hover::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground) / 0.3);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
|
|
:where(code, pre, kbd, samp) {
|
|
font-family: var(--font-mono);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-hide {
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Fade at the top edge of the chat, under the tab bar or a sticky header */
|
|
.chat-top-fade {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, var(--background) 100%, transparent) 25%,
|
|
color-mix(in srgb, var(--background) 80%, transparent) 50%,
|
|
color-mix(in srgb, var(--background) 40%, transparent) 75%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.shimmer-text {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--muted-foreground),
|
|
var(--foreground),
|
|
var(--muted-foreground)
|
|
);
|
|
background-size: 200% 100%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-weight: 500;
|
|
animation: shimmer 1s linear infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.shimmer-text {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mermaidTooltip {
|
|
display: none !important;
|
|
}
|