Introduce a "Show less" control to collapse expanded response text

Author: robertpiosik

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

@@ -27,6 +27,11 @@
     display: flex;
     overflow: auto;
   }
+
+  &__collapse > span {
+    cursor: pointer;
+    font-weight: 500;
+  }
 }
 
 .hidden {

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

@@ -23,6 +23,9 @@ export const TextItem: FC<Props> = (props) => {
           <ReactMarkdown disallowedElements={['hr']}>
             {props.content}
           </ReactMarkdown>
+          <div className={styles.text__collapse}>
+            <span>Show less</span>
+          </div>
         </div>
       ) : (
         <div

packages/ui/src/components/editor/panel/Responses/Responses.module.scss

@@ -1,6 +1,7 @@
 .responses {
   margin: 0 var(--padding-16px);
   display: flex;
+  position: relative;
   flex-direction: column;
   border-top-left-radius: var(--border-radius-5px);
   border-top-right-radius: var(--border-radius-5px);
@@ -9,6 +10,7 @@
   padding-bottom: var(--padding-5px);
   margin-bottom: calc(var(--padding-5px) * -1);
   overflow: hidden;
+  background-color: var(--vscode-sideBar-background);
 
   &:hover {
     border-color: var(--cwc-border-color);