Fixed message alignment

frontend/src/app.module.css

@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background-color: #ffffff;
+  background-color: var(--white);
   justify-content: center;
   border-radius: 24px;
   margin-top: 12px;

frontend/src/components/message.module.css

@@ -33,3 +33,8 @@
   line-height: 22px;
   font-size: 16px;
 }
+
+.messageStyle.single-line {
+  margin-top: 0;
+  margin-bottom: 0;
+}

frontend/src/components/message.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styles from './message.module.css';
 import UserIcon from '../icons/account-circle.svg';
 import BotIcon from '../icons/logomark.svg';
@@ -40,10 +40,36 @@ export const MessageComponent = ({ message }: MessageProps) => {
 
   const { class: roleClass, icon } = useMemo(() => roleStyleMap[role], [role]);
 
+  const messageRef = useRef<HTMLParagraphElement>(null);
+  const [isSingleLine, setIsSingleLine] = useState(false);
+
+  const checkSingleLine = () => {
+    if (messageRef.current) {
+      const singleLineHeight = 22;
+      const actualHeight = messageRef.current.offsetHeight;
+      setIsSingleLine(actualHeight <= singleLineHeight);
+    }
+  };
+
+  useEffect(() => {
+    checkSingleLine();
+    window.addEventListener('resize', checkSingleLine);
+    return () => {
+      window.removeEventListener('resize', checkSingleLine);
+    };
+  }, [content]);
+
   return (
     <div className={classNames(styles.container, roleClass)}>
       <img src={icon} className={styles.iconStyle} />
-      <p className={styles.messageStyle}>{content}</p>
+      <p
+        ref={messageRef}
+        className={classNames(styles.messageStyle, {
+          [styles['single-line']]: isSingleLine,
+        })}
+      >
+        {content}
+      </p>
     </div>
   );
 };

frontend/src/styles.css

@@ -20,12 +20,6 @@ body,
   --black: #000000;
   --white: #ffffff;
 
-  --background-color-primary: #282828;
-  --blue: #007bff;
-  --border-primary: #424242;
-  --text-color-primary: #ffffff;
-  --text-color-secondary: #899090;
-
   background-color: var(--grey-200);
   color: var(--grey-900);
 }