Skip to content

Reduce font and icon sizes in input bar #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mng-dev-ai merged 1 commit into from
Feb 21, 2026
Merged

Reduce font and icon sizes in input bar #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/chat/message-input/AttachButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function AttachButton({ onAttach }: AttachButtonProps) {
className="rounded-full p-1.5 text-text-tertiary transition-colors duration-200 hover:bg-surface-hover hover:text-text-primary active:scale-95 dark:text-text-dark-tertiary dark:hover:bg-surface-dark-hover dark:hover:text-text-dark-primary"
aria-label="Attach file"
>
<Image className="h-4 w-4" />
<Image className="h-3.5 w-3.5" />
</Button>
);
}
4 changes: 2 additions & 2 deletions frontend/src/components/chat/message-input/ContextUsageIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@ export const ContextUsageIndicator = ({ usage }: { usage: ContextUsageInfo }) =>

return (
<div
className="flex select-none items-center gap-1.5 text-xs text-text-secondary dark:text-text-dark-secondary"
className="flex select-none items-center gap-1 text-2xs text-text-secondary dark:text-text-dark-secondary"
title={tooltip}
>
<span className="font-medium tabular-nums">{formattedPercentage}%</span>
<svg viewBox="0 0 24 24" className="h-6 w-6" role="presentation" aria-hidden="true">
<svg viewBox="0 0 24 24" className="h-5 w-5" role="presentation" aria-hidden="true">
<circle
cx="12"
cy="12"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/chat/message-input/EnhanceButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function EnhanceButton({
aria-label={isEnhancing ? 'Enhancing prompt\u2026' : 'Enhance prompt'}
title={isEnhancing ? 'Enhancing prompt\u2026' : 'Enhance prompt with AI'}
>
<Sparkles className={`h-3.5 w-3.5 ${isEnhancing ? 'animate-spin' : ''}`} />
<Sparkles className={`h-3 w-3 ${isEnhancing ? 'animate-spin' : ''}`} />
</Button>
);
}
6 changes: 3 additions & 3 deletions frontend/src/components/chat/message-input/SendButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,16 @@ export function SendButton({
const renderIcon = () => {
if (showSpinnerIcon) {
return (
<LoaderCircle className="h-4 w-4 animate-spin text-text-dark-primary dark:text-text-primary" />
<LoaderCircle className="h-3.5 w-3.5 animate-spin text-text-dark-primary dark:text-text-primary" />
);
}

if (showStopIcon) {
return <Pause className="h-3.5 w-3.5 animate-pulse text-text-dark-primary" />;
return <Pause className="h-3 w-3 animate-pulse text-text-dark-primary" />;
}
return (
<ArrowUp
className={`h-4 w-4 transition-transform ${hasMessage ? 'text-text-dark-primary dark:text-text-primary' : 'text-text-quaternary'}`}
className={`h-3.5 w-3.5 transition-transform ${hasMessage ? 'text-text-dark-primary dark:text-text-primary' : 'text-text-quaternary'}`}
/>
);
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/chat/message-input/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export function Textarea({
placeholder={placeholder}
disabled={isLoading}
rows={1}
className={`max-h-[180px] w-full resize-none overflow-y-auto bg-transparent py-1.5 pr-14 text-sm leading-normal text-text-primary outline-none transition-all duration-200 placeholder:text-text-quaternary focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary ${isMobile && compact ? 'min-h-[28px]' : 'min-h-[80px]'}`}
className={`max-h-[180px] w-full resize-none overflow-y-auto bg-transparent py-1.5 pr-14 text-xs leading-normal text-text-primary outline-none transition-all duration-200 placeholder:text-text-quaternary focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary ${isMobile && compact ? 'min-h-[28px]' : 'min-h-[80px]'}`}
style={THIN_SCROLLBAR_STYLE}
aria-label="Message input"
/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/chat/model-selector/ModelSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const ModelSelector = memo(function ModelSelector({
searchPlaceholder="Search models..."
renderItem={(model, isSelected) => (
<span
className={`truncate text-xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
className={`truncate text-2xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
>
{model.name}
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/chat/permission-mode-selector/PermissionModeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const PermissionModeSelector = memo(function PermissionModeSelector({
renderItem={(mode, isSelected) => (
<>
<span
className={`text-xs font-medium text-text-primary ${isSelected ? 'dark:text-text-dark-primary' : 'dark:text-text-dark-secondary'}`}
className={`text-2xs font-medium text-text-primary ${isSelected ? 'dark:text-text-dark-primary' : 'dark:text-text-dark-secondary'}`}
>
{mode.label}
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/chat/thinking-mode-selector/ThinkingModeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const ThinkingModeSelector = memo(function ThinkingModeSelector({
renderItem={(mode, isSelected) => (
<div className="flex w-full items-center justify-between gap-3">
<span
className={`text-xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
className={`text-2xs font-medium ${isSelected ? 'text-text-primary dark:text-text-dark-primary' : 'text-text-secondary dark:text-text-dark-secondary'}`}
>
{mode.label}
</span>
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/components/ui/primitives/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,9 @@ function DropdownInner<T>({
const showIconOnly = (compactOnMobile || forceCompact) && LeftIcon;
const labelClasses = showIconOnly
? forceCompact
? 'hidden whitespace-nowrap text-xs font-medium text-text-primary dark:text-text-dark-secondary'
: 'hidden lg:inline whitespace-nowrap text-xs font-medium text-text-primary dark:text-text-dark-secondary'
: 'whitespace-nowrap text-xs font-medium text-text-primary dark:text-text-dark-secondary';
? 'hidden whitespace-nowrap text-2xs font-medium text-text-primary dark:text-text-dark-secondary'
: 'hidden lg:inline whitespace-nowrap text-2xs font-medium text-text-primary dark:text-text-dark-secondary'
: 'whitespace-nowrap text-2xs font-medium text-text-primary dark:text-text-dark-secondary';
const chevronClasses = showIconOnly
? forceCompact
? 'hidden'
Expand All @@ -146,7 +146,7 @@ function DropdownInner<T>({
>
{LeftIcon && (
<LeftIcon
className={`h-3.5 w-3.5 text-text-tertiary dark:text-text-dark-tertiary${forceCompact ? '' : 'lg:hidden'}`}
className={`h-3 w-3 text-text-tertiary dark:text-text-dark-tertiary${forceCompact ? '' : 'lg:hidden'}`}
/>
)}
<span className={labelClasses}>
Expand All @@ -171,7 +171,7 @@ function DropdownInner<T>({
onKeyDown={handleSearchKeyDown}
placeholder={searchPlaceholder}
autoFocus={!isMobile}
className="h-7 w-full rounded-lg border border-border bg-surface-tertiary py-1 pl-7 pr-7 text-xs text-text-primary transition-colors duration-200 placeholder:text-text-quaternary focus:border-border-hover focus:outline-none dark:border-border-dark dark:bg-surface-dark-tertiary dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary dark:focus:border-border-dark-hover"
className="h-7 w-full rounded-lg border border-border bg-surface-tertiary py-1 pl-7 pr-7 text-2xs text-text-primary transition-colors duration-200 placeholder:text-text-quaternary focus:border-border-hover focus:outline-none dark:border-border-dark dark:bg-surface-dark-tertiary dark:text-text-dark-primary dark:placeholder:text-text-dark-quaternary dark:focus:border-border-dark-hover"
/>
{searchQuery && (
<Button
Expand Down Expand Up @@ -220,7 +220,7 @@ function DropdownInner<T>({
renderItem(item.data, isSelected)
) : (
<span
className={`text-xs font-medium ${
className={`text-2xs font-medium ${
isSelected
? 'text-text-primary dark:text-text-dark-primary'
: 'text-text-secondary dark:text-text-dark-secondary'
Expand Down Expand Up @@ -254,7 +254,7 @@ function DropdownInner<T>({
renderItem(item, isSelected)
) : (
<span
className={`text-xs font-medium ${
className={`text-2xs font-medium ${
isSelected
? 'text-text-primary dark:text-text-dark-primary'
: 'text-text-secondary dark:text-text-dark-secondary'
Expand Down