WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-27 20:14:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] chat: stats density follows the container, the capped note sits on the widget, the reconnect pill yields to a tile, the docked browser grows in

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
ciregenz
2026-09-06 14:03:29 -07:00
co-authored by Claude Fable 5.1
parent ae297de242
commit c1fcfa6797
7 changed files with 75 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/toolui/components/stats-display/stats-display.tsx
+9 -7
View File
@@ -176,7 +176,7 @@ function StatCard({
<div
className={cn(
"relative flex flex-col gap-1",
compact ? "min-h-16 px-3" : "min-h-28 px-6",
compact ? "min-h-16 px-3" : "min-h-16 px-3 @[440px]:min-h-28 @[440px]:px-6",
isSingle ? "justify-center" : "justify-end",
)}
>
@@ -203,7 +203,7 @@ function StatCard({
<span
className={cn(
"font-light tracking-normal",
isSingle ? "text-5xl" : compact ? "text-xl" : "text-3xl",
isSingle ? "text-5xl" : compact ? "text-xl" : "text-xl @[440px]:text-3xl",
)}
>
<FormattedValue
@@ -257,11 +257,13 @@ export function StatsDisplay({
)}
<CardContent className="@container overflow-hidden p-0">
<div
className="grid @[440px]:-ml-px @[440px]:-mt-px"
style={{
// Under a collapsed pill (compact) three cells must sit side by side at ~380 px; the page-sized minimum stacked them into a 336 px column.
gridTemplateColumns: compact ? "repeat(auto-fit, minmax(110px, 1fr))" : "repeat(auto-fit, minmax(220px, 1fr))",
}}
// A chat column or a pill is narrower than the page these were drawn for: cells sit side by side from ~330 px (110 px each) and take the page's 220 px minimum only past 660 px, so a quarter-tiled chat no longer stacks three numbers into a 336 px column (ENG-469).
className={cn(
"grid @[440px]:-ml-px @[440px]:-mt-px",
compact
? "grid-cols-[repeat(auto-fit,minmax(110px,1fr))]"
: "grid-cols-[repeat(auto-fit,minmax(110px,1fr))] @[660px]:grid-cols-[repeat(auto-fit,minmax(220px,1fr))]",
)}
>
{stats.map((stat, index) => (
<div
frontend/src/toolui/components/stats-display/statsCompact.test.ts
+6 -3
View File
@@ -5,10 +5,13 @@ import path from 'node:path';
// Under a collapsed pill the vendored stats card stacked its three cells into a 336 px column (its grid
// minimum is 220 px per cell and the pill is 380 px wide). Compact density puts them side by side.
test('compact density narrows the grid minimum and the cell so three stats fit a pill', () => {
// A quarter-tiled chat column is under 440 px too, so the same density follows the CONTAINER width in the chat: dense
// cells and a 110 px minimum by default, the page's 220 px minimum only past 660 px (ENG-469 item 3).
test('density follows the container: dense by default, page density only in a wide container, compact forces dense', () => {
const src = fs.readFileSync(path.join(process.cwd(), 'src/toolui/components/stats-display/stats-display.tsx'), 'utf8');
assert.ok(src.includes('compact ? "repeat(auto-fit, minmax(110px, 1fr))" : "repeat(auto-fit, minmax(220px, 1fr))"'));
assert.ok(src.includes('compact ? "min-h-16 px-3" : "min-h-28 px-6"'));
assert.ok(src.includes('? "grid-cols-[repeat(auto-fit,minmax(110px,1fr))]"'));
assert.ok(src.includes(': "grid-cols-[repeat(auto-fit,minmax(110px,1fr))] @[660px]:grid-cols-[repeat(auto-fit,minmax(220px,1fr))]"'));
assert.ok(src.includes('compact ? "min-h-16 px-3" : "min-h-16 px-3 @[440px]:min-h-28 @[440px]:px-6"'));
assert.ok(src.includes('compact={compact}'), 'the density reaches every cell');
assert.ok(src.includes('compact ? "min-w-0" : "min-w-80"'), 'the 320 px floor would overflow the pill');
});