fix: small ui nits (#1178)

components/chat-header.tsx

@@ -35,7 +35,7 @@ function PureChatHeader({
       {(!open || windowWidth < 768) && (
         <Button
           variant="outline"
-          className="order-2 ml-auto px-2 md:order-1 md:ml-0 md:h-fit md:px-2"
+          className="order-2 ml-auto h-8 px-2 md:order-1 md:ml-0 md:h-fit md:px-2"
           onClick={() => {
             router.push('/');
             router.refresh();
@@ -55,7 +55,7 @@ function PureChatHeader({
       )}
 
       <Button
-        className="order-3 hidden h-fit bg-zinc-900 px-2 py-1.5 text-zinc-50 hover:bg-zinc-800 md:ml-auto md:flex md:h-[34px] dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
+        className="order-3 hidden bg-zinc-900 px-2 text-zinc-50 hover:bg-zinc-800 md:ml-auto md:flex md:h-fit dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
         asChild
       >
         <Link

components/elements/context.tsx

@@ -275,8 +275,9 @@ export const Context = ({
       <HoverCardTrigger asChild>
         <button
           className={cn(
-            'inline-flex select-none items-center gap-1 rounded-md px-2.5 py-1 text-sm',
+            'inline-flex select-none items-center gap-1 rounded-md px-1.5 py-1 text-sm',
             'bg-background text-foreground',
+            className,
           )}
           type="button"
           {...props}

components/elements/prompt-input.tsx

@@ -201,6 +201,7 @@ export const PromptInputModelSelectTrigger = ({
     className={cn(
       'border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors',
       'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground',
+      'h-auto px-2 py-1.5',
       className,
     )}
     {...props}

components/icons.tsx

@@ -515,14 +515,15 @@ export const InfoIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const ArrowUpIcon = ({ size = 16 }: { size?: number }) => {
+export const ArrowUpIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       height={size}
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width={size}
-      style={{ color: 'currentcolor' }}
+      style={{ color: 'currentcolor', ...props.style }}
+      {...props}
     >
       <path
         fillRule="evenodd"
@@ -534,13 +535,14 @@ export const ArrowUpIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const StopIcon = ({ size = 16 }: { size?: number }) => {
+export const StopIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       height={size}
       viewBox="0 0 16 16"
       width={size}
-      style={{ color: 'currentcolor' }}
+      style={{ color: 'currentcolor', ...props.style }}
+      {...props}
     >
       <path
         fillRule="evenodd"
@@ -552,15 +554,16 @@ export const StopIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const PaperclipIcon = ({ size = 16 }: { size?: number }) => {
+export const PaperclipIcon = ({ size = 16, ...props }: { size?: number } & React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
       height={size}
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width={size}
-      style={{ color: 'currentcolor' }}
+      style={{ color: 'currentcolor', ...props.style }}
       className="-rotate-45"
+      {...props}
     >
       <path
         fillRule="evenodd"

components/message.tsx

@@ -63,7 +63,7 @@ const PurePreviewMessage = ({
       data-role={message.role}
     >
       <div
-        className={cn('flex w-full items-start gap-3', {
+        className={cn('flex w-full items-start gap-2 md:gap-3', {
           'justify-end': message.role === 'user' && mode !== 'edit',
           'justify-start': message.role === 'assistant',
         })}
@@ -86,7 +86,7 @@ const PurePreviewMessage = ({
                   (p) => p.type === 'text' && p.text?.trim(),
                 )) ||
               mode === 'edit',
-            'max-w-[90%] sm:max-w-[min(fit-content,80%)]':
+            'max-w-[calc(100%-2.5rem)] sm:max-w-[min(fit-content,80%)]':
               message.role === 'user' && mode !== 'edit',
           })}
         >
@@ -317,7 +317,7 @@ export const ThinkingMessage = () => {
         </div>
 
         <div className="flex w-full flex-col gap-2 md:gap-4">
-          <div className="p-0 text-sm text-muted-foreground">
+          <div className='p-0 text-muted-foreground text-sm'>
             <LoadingText>Thinking...</LoadingText>
           </div>
         </div>

components/messages.tsx

@@ -66,8 +66,8 @@ function PureMessages({
       className="overscroll-behavior-contain -webkit-overflow-scrolling-touch flex-1 touch-pan-y overflow-y-scroll"
       style={{ overflowAnchor: 'none' }}
     >
-      <Conversation className="flex flex-col gap-4 px-2 py-4 mx-auto min-w-0 max-w-4xl md:gap-6 md:px-4">
-        <ConversationContent className="flex flex-col gap-4 md:gap-6">
+      <Conversation className='mx-auto flex min-w-0 max-w-4xl flex-col gap-4 md:gap-6'>
+        <ConversationContent className="flex flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
           {messages.length === 0 && <Greeting />}
 
           {messages.map((message, index) => (

components/model-selector.tsx

@@ -62,7 +62,7 @@ export function ModelSelector({
           <ChevronDownIcon />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="min-w-[300px]">
+      <DropdownMenuContent align="start" className="min-w-[280px] max-w-[90vw] sm:min-w-[300px]">
         {availableChatModels.map((chatModel) => {
           const { id } = chatModel;
 
@@ -83,16 +83,16 @@ export function ModelSelector({
             >
               <button
                 type="button"
-                className="group/item flex w-full flex-row items-center justify-between gap-4"
+                className="group/item flex w-full flex-row items-center justify-between gap-2 sm:gap-4"
               >
                 <div className="flex flex-col items-start gap-1">
-                  <div>{chatModel.name}</div>
-                  <div className="text-muted-foreground text-xs">
+                  <div className="text-sm sm:text-base">{chatModel.name}</div>
+                  <div className='line-clamp-2 text-muted-foreground text-xs'>
                     {chatModel.description}
                   </div>
                 </div>
 
-                <div className="text-foreground opacity-0 group-data-[active=true]/item:opacity-100 dark:text-foreground">
+                <div className='shrink-0 text-foreground opacity-0 group-data-[active=true]/item:opacity-100 dark:text-foreground'>
                   <CheckCircleFillIcon />
                 </div>
               </button>

components/multimodal-input.tsx

@@ -253,7 +253,7 @@ function PureMultimodalInput({
   }, [status, scrollToBottom]);
 
   return (
-    <div className="relative flex w-full flex-col gap-4">
+    <div className='relative flex w-full flex-col gap-4'>
       <AnimatePresence>
         {!isAtBottom && (
           <motion.div
@@ -261,7 +261,7 @@ function PureMultimodalInput({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ type: 'spring', stiffness: 300, damping: 20 }}
-            className="-top-12 -translate-x-1/2 absolute left-1/2 z-50"
+            className='-top-12 -translate-x-1/2 absolute left-1/2 z-50'
           >
             <Button
               data-testid="scroll-to-bottom-button"
@@ -299,7 +299,7 @@ function PureMultimodalInput({
       />
 
       <PromptInput
-        className="rounded-xl border border-border bg-background shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50"
+        className='rounded-xl border border-border bg-background shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50'
         onSubmit={(event) => {
           event.preventDefault();
           if (status !== 'ready') {
@@ -312,7 +312,7 @@ function PureMultimodalInput({
         {(attachments.length > 0 || uploadQueue.length > 0) && (
           <div
             data-testid="attachments-preview"
-            className="flex flex-row items-end gap-2 overflow-x-scroll px-3 py-2"
+            className='flex flex-row items-end gap-2 overflow-x-scroll px-3 py-2'
           >
             {attachments.map((attachment) => (
               <PreviewAttachment
@@ -342,7 +342,7 @@ function PureMultimodalInput({
             ))}
           </div>
         )}
-        <div className="flex flex-row gap-2 items-start">
+        <div className='flex flex-row items-start gap-1 sm:gap-2'>
           <PromptInputTextarea
             data-testid="multimodal-input"
             ref={textareaRef}
@@ -352,14 +352,14 @@ function PureMultimodalInput({
             minHeight={44}
             maxHeight={200}
             disableAutoResize={true}
-            className="text-sm grow resize-none py-3 px-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent border-0! border-none! outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground"
+            className='grow resize-none border-0! border-none! bg-transparent px-2 py-3 text-sm outline-none ring-0 [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:px-3 [&::-webkit-scrollbar]:hidden'
             rows={1}
             autoFocus
           />{' '}
-          <Context {...contextProps} />
+          <Context {...contextProps} className="mr-1.5" />
         </div>
-        <PromptInputToolbar className="px-3 py-2 border-t-0! !border-top-0 shadow-none dark:border-transparent! dark:border-0">
-          <PromptInputTools className="gap-2">
+        <PromptInputToolbar className='!border-top-0 border-t-0! px-2 py-2 shadow-none dark:border-0 dark:border-transparent!'>
+          <PromptInputTools className="gap-1 sm:gap-2">
             <AttachmentsButton
               fileInputRef={fileInputRef}
               status={status}
@@ -374,9 +374,9 @@ function PureMultimodalInput({
             <PromptInputSubmit
               status={status}
               disabled={!input.trim() || uploadQueue.length > 0}
-              className="rounded-full bg-primary p-2 text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
+              className="size-7 rounded-full bg-primary p-1 text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
             >
-              <ArrowUpIcon size={16} />
+              <ArrowUpIcon size={14} />
             </PromptInputSubmit>
           )}
         </PromptInputToolbar>
@@ -413,16 +413,15 @@ function PureAttachmentsButton({
   return (
     <Button
       data-testid="attachments-button"
-      className="h-fit rounded-md p-1.5 transition-colors duration-200 hover:bg-muted"
+      className='h-fit rounded-md p-1 transition-colors duration-200 hover:bg-muted'
       onClick={(event) => {
         event.preventDefault();
         fileInputRef.current?.click();
       }}
       disabled={status !== 'ready' || isReasoningModel}
       variant="ghost"
-      size="sm"
     >
-      <PaperclipIcon size={14} />
+      <PaperclipIcon size={14} style={{ width: 14, height: 14 }} />
     </Button>
   );
 }
@@ -455,16 +454,16 @@ function PureModelSelectorCompact({
     >
       <PromptInputModelSelectTrigger
         type="button"
-        className="text-xs focus:outline-hidden focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=closed]:ring-0 data-[state=open]:ring-0"
+        className='max-w-[120px] truncate text-xs focus:outline-hidden focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=closed]:ring-0 data-[state=open]:ring-0 sm:max-w-none'
       >
         {selectedModel?.name || 'Select model'}
       </PromptInputModelSelectTrigger>
-      <PromptInputModelSelectContent>
+      <PromptInputModelSelectContent className="max-w-[90vw] sm:max-w-[400px]">
         {chatModels.map((model) => (
           <SelectItem key={model.id} value={model.name}>
-            <div className="flex flex-col items-start gap-1 py-1">
-              <div className="font-medium">{model.name}</div>
-              <div className="text-muted-foreground text-xs">
+            <div className='flex flex-col items-start gap-1 py-1'>
+              <div className='font-medium text-sm'>{model.name}</div>
+              <div className='line-clamp-2 text-muted-foreground text-xs'>
                 {model.description}
               </div>
             </div>
@@ -487,16 +486,14 @@ function PureStopButton({
   return (
     <Button
       data-testid="stop-button"
-      className="h-fit rounded-full border border-border p-2 transition-colors duration-200 hover:bg-muted"
+      className="size-7 rounded-full bg-foreground p-1 text-background transition-colors duration-200 hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground"
       onClick={(event) => {
         event.preventDefault();
         stop();
         setMessages((messages) => messages);
       }}
-      variant="outline"
-      size="sm"
     >
-      <StopIcon size={16} />
+      <StopIcon size={14} />
     </Button>
   );
 }

components/preview-attachment.tsx

@@ -18,7 +18,7 @@ export const PreviewAttachment = ({
   const { name, url, contentType } = attachment;
 
   return (
-    <div data-testid="input-attachment-preview" className="group relative size-16 rounded-lg overflow-hidden bg-muted border">
+    <div data-testid="input-attachment-preview" className='group relative size-16 overflow-hidden rounded-lg border bg-muted'>
       {contentType?.startsWith('image') ? (
         <Image
           src={url}
@@ -28,7 +28,7 @@ export const PreviewAttachment = ({
           height={64}
         />
       ) : (
-        <div className="size-full flex items-center justify-center text-xs text-muted-foreground">
+        <div className='flex size-full items-center justify-center text-muted-foreground text-xs'>
           File
         </div>
       )}
@@ -50,7 +50,7 @@ export const PreviewAttachment = ({
         </Button>
       )}
 
-      <div className="absolute bottom-0 inset-x-0 bg-linear-to-t from-black/80 to-transparent text-white text-[10px] px-1 py-0.5 truncate">
+      <div className='absolute inset-x-0 bottom-0 truncate bg-linear-to-t from-black/80 to-transparent px-1 py-0.5 text-[10px] text-white'>
         {name}
       </div>
     </div>

components/sidebar-toggle.tsx

@@ -22,7 +22,7 @@ export function SidebarToggle({
           data-testid="sidebar-toggle-button"
           onClick={toggleSidebar}
           variant="outline"
-          className="h-8 px-1 md:h-fit md:px-2"
+          className="h-8 px-2 md:h-fit md:px-2"
         >
           <SidebarLeftIcon size={16} />
         </Button>

components/visibility-selector.tsx

@@ -71,7 +71,7 @@ export function VisibilitySelector({
         <Button
           data-testid="visibility-selector"
           variant="outline"
-          className="hidden focus:outline-hidden focus:ring-0 md:flex md:h-[34px] md:px-2"
+          className="hidden focus:outline-hidden focus:ring-0 md:flex md:h-fit md:px-2"
         >
           {selectedVisibility?.icon}
           {selectedVisibility?.label}