fix: refactor response examples to use MenuDropdown and Editable components (#6382)

* feat: use common dropdown component

* fix: update example ui to match v3

* fix: test cases, bugs

* fix: review comments

* fix: review comments

* fix: review

* fix: file body/binary table within response examples

* fix: file name, close btn not visible issue

* fix: unnessary transition for three  dots

* fix: install missing deps in bruno-app

* update example url when param is updated

* empty commit

* chore: update package-lock.json

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>

packages/bruno-app/src/components/EditableTable/StyledWrapper.js

@@ -35,17 +35,17 @@ const StyledWrapper = styled.div`
       border-right: ${(props) => props.theme.workspace.environments.indentBorder};
       vertical-align: middle;
 
-      &:nth-child(1) {
-        width: 25px !important;
-        border-right: none;
-      }
-
       &:last-child {
         border-right: none;
       }
     }
   }
 
+  &.has-checkbox thead td:nth-child(1) {
+    width: 25px !important;
+    border-right: none;
+  }
+
   tbody {
     tr {
       transition: background 0.1s ease;
@@ -62,19 +62,6 @@ const StyledWrapper = styled.div`
         border-right: ${(props) => props.theme.workspace.environments.indentBorder};
         vertical-align: middle;
 
-        &:nth-child(1) {
-          width: 25px;
-          border-right: none;
-          text-align: center;
-          vertical-align: middle;
-          line-height: 1;
-
-          input[type='checkbox'] {
-            vertical-align: baseline;
-            display: inline-block;
-          }
-        }
-
         &:last-child {
           border-right: none;
         }
@@ -82,6 +69,19 @@ const StyledWrapper = styled.div`
     }
   }
 
+  &.has-checkbox tbody td:nth-child(1) {
+    width: 25px;
+    border-right: none;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 1;
+
+    input[type='checkbox'] {
+      vertical-align: baseline;
+      display: inline-block;
+    }
+  }
+
   .tooltip-mod {
     font-size: 11px !important;
     max-width: 200px !important;

packages/bruno-app/src/components/EditableTable/index.js

@@ -223,7 +223,7 @@ const EditableTable = ({
   const reorderableRowCount = showAddRow ? rowsWithEmpty.length - 1 : rowsWithEmpty.length;
 
   return (
-    <StyledWrapper>
+    <StyledWrapper className={showCheckbox ? 'has-checkbox' : 'no-checkbox'}>
       <div className="table-container" ref={tableRef}>
         <table>
           <thead>