Implement toggling functionality to allow users to expand and collapse the response preview text item

Author: robertpiosik

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

@@ -29,20 +29,21 @@
     position: relative;
   }
 
-  &--overflowing {
+  &--expandable {
     cursor: pointer;
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 20px;
-      background: linear-gradient(
-        to bottom,
-        transparent,
-        var(--vscode-list-hoverBackground)
-      );
-    }
+  }
+
+  &--overflowing::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 20px;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--vscode-list-hoverBackground)
+    );
   }
 }

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

@@ -24,10 +24,15 @@ export const TextItem: FC<Props> = ({ content }) => {
     <div
       ref={ref}
       className={cn(styles.text, {
+        [styles['text--expandable']]: is_expanded || is_overflowing,
         [styles['text--collapsed']]: !is_expanded,
         [styles['text--overflowing']]: !is_expanded && is_overflowing
       })}
-      onClick={is_overflowing ? () => set_is_expanded(true) : undefined}
+      onClick={
+        is_overflowing || is_expanded
+          ? () => set_is_expanded((prev) => !prev)
+          : undefined
+      }
     >
       <ReactMarkdown>{content}</ReactMarkdown>
     </div>