fix(ui): adjust height for avatars in Chat (#3158)

* fix(ui): adjust height for avatars in Chat * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · Sep 18, 2024 · d6350e0 · d6350e0
1 parent f62fe40
commit d6350e0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/ee/tabby-ui/components/chat/code-references.tsx b/ee/tabby-ui/components/chat/code-references.tsx
@@ -21,6 +21,7 @@ interface ContextReferencesProps {
   contexts: RelevantCodeContext[]
   userContexts?: RelevantCodeContext[]
   className?: string
+  triggerClassname?: string
   onContextClick?: (
     context: RelevantCodeContext,
     isInWorkspace?: boolean
@@ -40,6 +41,7 @@ export const CodeReferences = forwardRef<
       contexts,
       userContexts,
       className,
+      triggerClassname,
       onContextClick,
       enableTooltip,
       onTooltipClick,
@@ -76,7 +78,9 @@ export const CodeReferences = forwardRef<
         onValueChange={setAccordionValue}
       >
         <AccordionItem value="references" className="my-0 border-0">
-          <AccordionTrigger className="my-0 py-2 font-semibold">
+          <AccordionTrigger
+            className={cn('my-0 py-2 font-semibold', triggerClassname)}
+          >
             <span className="mr-2">{`Read ${totalContextLength} file${
               isMultipleReferences ? 's' : ''
             }`}</span>

diff --git a/ee/tabby-ui/components/chat/question-answer.tsx b/ee/tabby-ui/components/chat/question-answer.tsx
@@ -128,9 +128,12 @@ function UserMessageCard(props: { message: UserMessage }) {
       {...props}
     >
       <div
-        className={cn('flex w-full items-center justify-between md:w-auto', {
-          'hidden md:flex': !data?.me.name
-        })}
+        className={cn(
+          'flex min-h-[2rem] w-full items-center justify-between md:w-auto',
+          {
+            'hidden md:flex': !data?.me.name
+          }
+        )}
       >
         <div className="flex items-center gap-x-2">
           <div className="shrink-0 select-none rounded-full border bg-background shadow">
@@ -325,7 +328,7 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
       )}
       {...rest}
     >
-      <div className="flex w-full items-center justify-between md:w-auto">
+      <div className="flex min-h-[2rem] w-full items-center justify-between md:w-auto">
         <div className="flex items-center gap-x-2">
           <div className="shrink-0 select-none rounded-full border bg-background shadow">
             <IconTabby className="h-6 w-6 md:h-8 md:w-8" />
@@ -355,6 +358,7 @@ function AssistantMessageCard(props: AssistantMessageCardProps) {
           // When onApplyInEditor is null, it means isInEditor === false, thus there's no need to showExternalLink
           showExternalLink={!!onApplyInEditor}
           highlightIndex={relevantCodeHighlightIndex}
+          triggerClassname="md:pt-0"
         />
         {isLoading && !message?.message ? (
           <MessagePendingIndicator />