style: scroll for markdown-body(conversation body)

josStorer · Mar 13, 2023 · 0ac3716 · 0ac3716
1 parent 7baf7b5
commit 0ac3716
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx
@@ -1,10 +1,10 @@
 import Browser from 'webextension-polyfill'
-import { cloneElement, useEffect, useRef, useState } from 'react'
+import { cloneElement, useEffect, useState } from 'react'
 import ConversationCardForSearch from '../ConversationCardForSearch'
 import PropTypes from 'prop-types'
 import { defaultConfig, getUserConfig } from '../../config.mjs'
 import { config as toolsConfig } from '../../content-script/selection-tools'
-import { initSession, setElementPositionInViewport, updateRefHeight } from '../../utils'
+import { initSession, setElementPositionInViewport } from '../../utils'
 import Draggable from 'react-draggable'
 
 const logo = Browser.runtime.getURL('logo.png')
@@ -17,7 +17,6 @@ function FloatingToolbar(props) {
   const [position, setPosition] = useState(props.position)
   const [virtualPosition, setVirtualPosition] = useState({ x: 0, y: 0 })
   const [session] = useState(initSession())
-  const toolWindow = useRef(null)
 
   useEffect(() => {
     getUserConfig()
@@ -70,14 +69,13 @@ function FloatingToolbar(props) {
           onStop={dragEvent.onStop}
           position={virtualPosition}
         >
-          <div className="gpt-selection-window" ref={toolWindow}>
+          <div className="gpt-selection-window">
             <div className="chat-gpt-container">
               <ConversationCardForSearch
                 session={session}
                 question={prompt}
                 showDragbar={true}
                 onUpdate={() => {
-                  updateRefHeight(toolWindow)
                   updatePosition()
                 }}
               />

diff --git a/src/content-script/styles.scss b/src/content-script/styles.scss
@@ -65,6 +65,8 @@
     padding: 5px 15px 10px;
     background-color: var(--theme-color);
     color: var(--font-color);
+    max-height: 800px;
+    overflow-y: auto;
 
     ul,
     ol {
@@ -226,11 +228,9 @@
 }
 
 .gpt-selection-window {
-  width: 450px;
-  max-height: 800px;
-  padding: 10px;
-  overflow-y: auto;
-  border-radius: 20px;
+  width: 600px;
+  height: auto;
+  border-radius: 8px;
   background-color: var(--theme-color);
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
 }