🐛 fix(chatMessage): fix styling issue in ChatMessage component to ensure proper alignment and text wrapping

🐛 fix(chatMessage): add max height and overflow to AccordionContent in ChatMessage component to prevent content overflow
🐛 fix(formModal): adjust width of left panel in FormModal component to improve layout
🐛 fix(formModal): fix flexbox alignment issue in right panel of FormModal component
This commit is contained in:
Lucas Oliveira 2023-07-06 00:29:05 -03:00
commit 0bb664f3ad
2 changed files with 8 additions and 6 deletions

View file

@ -149,9 +149,9 @@ export default function ChatMessage({
</div>
</div>
) : (
<div className="flex w-full flex-1 items-center">
<div className="inline-block text-start">
<span className="text-primary">
<div className="flex w-full items-center">
<div className="inline-block w-full text-start">
<span className="w-full break-all text-primary">
<Accordion
type="multiple"
className="my-2 w-full rounded-md bg-muted p-2"
@ -161,7 +161,9 @@ export default function ChatMessage({
.map((key) => (
<AccordionItem value={key}>
<AccordionTrigger>{key}</AccordionTrigger>
<AccordionContent>{chat.message[key]}</AccordionContent>
<AccordionContent className="max-h-96 overflow-auto break-all">
{chat.message[key]}
</AccordionContent>
</AccordionItem>
))}
</Accordion>

View file

@ -404,7 +404,7 @@ export default function FormModal({
</DialogHeader>
<div className="mt-2 flex h-[80vh] w-full ">
<div className="mr-6 flex h-full w-2/5 flex-col justify-start overflow-auto scrollbar-hide">
<div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
<div className="flex items-center py-2">
<Variable className=" -ml-px mr-1 h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary">
@ -496,7 +496,7 @@ export default function FormModal({
))}
</Accordion>
</div>
<div className="w-full">
<div className="flex w-full flex-1 flex-col">
<div className="relative flex h-full w-full flex-col rounded-md border bg-muted">
<div className="absolute right-3 top-3 z-50">
<button disabled={lockChat} onClick={() => clearChat()}>