Correct the spacing and layout of the collapsed response preview component

Author: robertpiosik

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.module.scss

@@ -31,14 +31,18 @@
   &__collapse > span {
     cursor: pointer;
     font-weight: 500;
+    font-size: var(--font-size-12px);
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
 .hidden {
   display: flex;
   align-items: center;
   margin: var(--padding-2px) var(--padding-12px);
-  gap: var(--padding-8px);
   padding-right: var(--padding-9px);
   position: relative;
 
@@ -54,6 +58,7 @@
     flex: 1;
     height: 1px;
     background-color: var(--cwc-border-color-dimmed);
+    margin: 0 10px 0 4px;
   }
 
   &__tokens {

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.tsx

@@ -1,6 +1,7 @@
 import { FC, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 import styles from './TextItem.module.scss'
+import cn from 'classnames'
 import { IconButton } from '../../IconButton'
 
 type Props = {
@@ -33,8 +34,8 @@ export const TextItem: FC<Props> = (props) => {
           className={styles.hidden}
           onClick={() => ref.current && props.on_toggle(ref.current)}
           title={props.content}
-          role="button"
         >
+          <IconButton codicon_icon="chevron-right" />
           <div className={styles.hidden__line} />
           <span className={styles.hidden__tokens}>
             {Math.floor(props.content.length * 0.25) || 1}