opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(models): fix mobile overflow and hide cost bars on small screens (#4125)

Browse Source
This commit is contained in:
Waleed
2026-04-12 22:26:57 -07:00
committed by GitHub
parent cd3e24b79b
commit ffda34442b
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sim/app/(landing)/models/components/model-comparison-charts.tsx
+4 -4
View File
@@ -59,7 +59,7 @@ function ModelLabel({ model }: ModelLabelProps) {
const Icon = PROVIDER_ICON_MAP[model.providerId]
return (
<div className='flex w-[140px] shrink-0 items-center justify-end gap-1.5 sm:w-[180px]'>
<div className='flex w-[90px] shrink-0 items-center justify-end gap-1.5 sm:w-[140px] lg:w-[180px]'>
{Icon && <Icon className='h-3.5 w-3.5 shrink-0' />}
<span className='truncate font-medium text-[13px] text-[var(--landing-text)] leading-none tracking-[-0.01em]'>
{model.displayName}
@@ -116,7 +116,7 @@ function StackedCostChart({ models }: ChartProps) {
<ModelLabel model={model} />
<div className='relative flex h-7 min-w-0 flex-1 items-center'>
<div
className='flex h-full overflow-hidden rounded-r-[3px]'
className='hidden h-full overflow-hidden rounded-r-[3px] sm:flex'
style={{ width: `${Math.max(totalPct, 3)}%` }}
>
<div
@@ -136,7 +136,7 @@ function StackedCostChart({ models }: ChartProps) {
}}
/>
</div>
<span className='ml-2.5 shrink-0 font-mono text-[var(--landing-text-muted)] text-xs'>
<span className='shrink-0 font-mono text-[11px] text-[var(--landing-text-muted)] sm:ml-2.5 sm:text-xs'>
{formatPrice(input)} input / {formatPrice(output)} output
</span>
</div>
@@ -196,7 +196,7 @@ function ContextWindowChart({ models }: ChartProps) {
opacity: 0.8,
}}
/>
<span className='ml-2.5 shrink-0 font-mono text-[var(--landing-text-muted)] text-xs'>
<span className='ml-2.5 shrink-0 font-mono text-[11px] text-[var(--landing-text-muted)] sm:text-xs'>
{formatTokenCount(value)}
</span>
</div>