From fb6f6f584bd24a7244018540f5548a1771e0d4fa Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Mon, 27 Mar 2023 21:24:13 +0800
Subject: [PATCH] style: improve display

---
 src/components/ConversationItem/index.jsx | 6 ++++--
 src/content-script/styles.scss            | 3 +++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ConversationItem/index.jsx b/src/components/ConversationItem/index.jsx
index 86892c4..e534423 100644
--- a/src/components/ConversationItem/index.jsx
+++ b/src/components/ConversationItem/index.jsx
@@ -34,8 +34,10 @@ export function ConversationItem({ type, content, session, done, port }) {
       return (
         <div className={type} dir="auto">
           <div className="gpt-header">
-            <p>{session && session.aiName ? `${session.aiName}:` : 'Loading...'}</p>
-            <div style="display: flex; gap: 15px;">
+            <p style="white-space: nowrap;">
+              {session && session.aiName ? `${session.aiName}:` : 'Loading...'}
+            </p>
+            <div style="display: flex; gap: 15px; align-items: center; white-space: nowrap;">
               {!done && (
                 <button
                   type="button"
diff --git a/src/content-script/styles.scss b/src/content-script/styles.scss
index 0c38b7a..865fd5c 100644
--- a/src/content-script/styles.scss
+++ b/src/content-script/styles.scss
@@ -171,10 +171,13 @@
     }
 
     .gpt-util-icon {
+      display: flex;
       cursor: pointer;
+      align-items: center;
     }
 
     .normal-button {
+      padding: 1px 6px;
       border: 1px solid;
       border-color: var(--theme-border-color);
       background-color: var(--theme-color);