fix: chat composer queue button and focus mode sizing (#616)

This commit is contained in:
shekohex
2026-03-07 09:59:00 +02:00
committed by GitHub
parent a7f11121e8
commit 2df3c6fad2
2 changed files with 8 additions and 5 deletions
@@ -2195,7 +2195,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
}}
className={cn(
footerIconButtonClass,
'absolute bottom-full left-1/2 -translate-x-1/2 mb-1',
'absolute z-20 bottom-full left-1/2 -translate-x-1/2 mb-1',
hasContent && currentSessionId
? 'text-primary hover:text-primary'
: 'opacity-30'
@@ -2625,7 +2625,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
: undefined}
/>
)}
<div className={cn("relative overflow-hidden", isDesktopExpanded && 'flex-1 min-h-0')}>
<div className={cn("relative overflow-hidden", isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
{highlightedComposerContent && (
<div
aria-hidden
@@ -2683,6 +2683,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
autoCorrect={isMobile ? "on" : "off"}
autoCapitalize={isMobile ? "sentences" : "off"}
spellCheck={isMobile}
fillContainer={isDesktopExpanded}
outerClassName={cn('focus-within:ring-0', isDesktopExpanded && 'flex-1 min-h-0')}
className={cn(
'min-h-[52px] resize-none border-0 px-3 rounded-b-none appearance-none hover:border-transparent bg-transparent relative z-10',
+5 -3
View File
@@ -6,20 +6,22 @@ import { ScrollableOverlay } from "./ScrollableOverlay"
type TextareaProps = React.ComponentProps<"textarea"> & {
outerClassName?: string;
scrollbarClassName?: string;
fillContainer?: boolean;
};
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, outerClassName, scrollbarClassName, ...props }, ref) => {
({ className, outerClassName, scrollbarClassName, fillContainer = false, ...props }, ref) => {
return (
<ScrollableOverlay
as="textarea"
ref={ref as React.Ref<HTMLTextAreaElement>}
disableHorizontal
fillContainer={false}
fillContainer={fillContainer}
outerClassName={cn("w-full rounded-lg focus-within:ring-1 focus-within:ring-primary/50", outerClassName)}
scrollbarClassName={scrollbarClassName}
className={cn(
"text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
"text-foreground border border-border/80 placeholder:text-muted-foreground appearance-none dark:bg-input/30 flex min-h-16 w-full rounded-lg bg-transparent px-3 py-2 typography-markdown outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:typography-ui-label",
fillContainer ? "[field-sizing:fixed]" : "field-sizing-content",
"hover:border-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"focus:border-primary/70",
className