fix: styles are overwritten on some websites (#88)

src/components/ConversationCard/index.jsx

@@ -196,7 +196,7 @@ function ConversationCard(props) {
             }}
           />
         ) : (
-          <img src={logo} width="20" height="20" style="margin:5px 15px 0px;user-select:none;" />
+          <img src={logo} style="margin:5px 15px 0px;user-select:none;width:20px;height:20px;" />
         )}
         {props.draggable ? (
           <div className="dragbar" />
@@ -225,7 +225,7 @@ function ConversationCard(props) {
         <span
           title="Save Conversation"
           className="gpt-util-icon"
-          style="margin:15px 15px 10px;"
+          style="margin:15px;"
           onClick={() => {
             let output = ''
             session.conversationRecords.forEach((data) => {

src/components/FloatingToolbar/index.jsx

@@ -143,7 +143,7 @@ function FloatingToolbar(props) {
     return (
       <div data-theme={config.themeMode}>
         <div className="chatgptbox-selection-toolbar">
-          <img src={logo} width="24" height="24" style="user-select:none;" />
+          <img src={logo} style="user-select:none;width:24px;height:24px;" />
           {tools}
         </div>
       </div>

src/content-script/styles.scss

@@ -44,6 +44,7 @@
 
 .chatgptbox-container * {
   font-family: 'Cairo', sans-serif;
+  font-size: 14px;
 }
 
 .chatgptbox-container {
@@ -153,6 +154,7 @@
     align-items: center;
     margin-bottom: 5px;
     color: var(--font-color);
+    height: 50px;
 
     p {
       font-weight: bold;