fix: make the dialog actions responsive in collections

src/app/views/sidebar/resource-explorer/collection/APICollection.tsx

@@ -19,6 +19,7 @@ import { useEffect, useState } from 'react';
 import { ResourcePath } from '../../../../../types/resources';
 import { setQueryResponseStatus } from '../../../../services/slices/query-status.slice';
 import { isGeneratedCollectionInCollection } from './upload-collection.util';
+import './api-collections.scss';
 
 export interface APICollection {
   version: string;
@@ -190,6 +191,13 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
       iconProps: { iconName: 'Upload' },
       onClick: () => document.getElementById('file-input')?.click()
     }
+    // {
+    //   key: 'download-permissions',
+    //   text: translateMessage('Download postman collection'),
+    //   iconProps: { iconName: 'Download' },
+    //   disabled: items.length === 0,
+    //   onClick: generateCollection
+    // }
   ];
 
   const farItems: ICommandBarItemProps[] = [
@@ -243,7 +251,7 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
       )}
 
       {items && items.length > 0 ?
-        (<div style={{ height: '80vh' }}>
+        (<div className='container'>
           <Paths
             resources={items}
             columns={columns}
@@ -252,16 +260,13 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
         ) :
         (
           <Label
-            style={{ display: 'flex', width: '100%',
-              height: '80vh',
-              justifyContent: 'center',
-              alignItems: 'center' }}>
+            className='label'>
             {translateMessage('Add queries in the API Explorer and History tab')}
           </Label>
         )}
       <DialogFooter
         styles={{
-          actionsRight: { bottom: 0, justifyContent: 'start' }
+          actionsRight: { bottom: 0, justifyContent: 'start', position: 'fixed', width: '100%', zIndex: 1  }
         }}>
         <PrimaryButton onClick={generateCollection} disabled={items.length === 0}>
           {translateMessage('Download postman collection')}

src/app/views/sidebar/resource-explorer/collection/CollectionPermissions.tsx

@@ -112,7 +112,7 @@ const CollectionPermissions: FC<PopupsComponent<null>> = (props) => {
       </div>
       {permissions &&
         <DialogFooter styles={{
-          actionsRight: { bottom: 0, justifyContent: 'start' }
+          actionsRight: { bottom: 0, justifyContent: 'start', position: 'fixed', width: '100%', zIndex: 1  }
         }}>
           <PrimaryButton onClick={downloadPermissions}>
             {translateMessage('Download permissions')}

src/app/views/sidebar/resource-explorer/collection/EditCollectionPanel.tsx

@@ -60,7 +60,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({closePopup}) =
       )}
       <DialogFooter
         styles={{
-          actionsRight: { bottom: 0, justifyContent: 'start' }
+          actionsRight: { bottom: 0, justifyContent: 'start', position: 'fixed', width: '100%', zIndex: 1 }
         }}>
         <PrimaryButton onClick={removeSelectedItems} disabled={selectedItems.length === 0}>
           {translateMessage('Delete all selected')}

src/app/views/sidebar/resource-explorer/collection/EditScopePanel.tsx

@@ -105,8 +105,10 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
           actionsRight: {
             display: 'flex',
             justifyContent: 'flex-start',
-            padding: '5px'
-          }
+            padding: '5px',
+            position: 'fixed',
+            width: '100%',
+            zIndex: 1          }
         }}>
         <PrimaryButton onClick={saveAllScopes} disabled={pendingChanges.length === 0}>
           {translateMessage('Save all')}

src/app/views/sidebar/resource-explorer/collection/api-collections.scss

@@ -0,0 +1,29 @@
+.container {
+  height: 80vh;
+}
+
+.label {
+  display: flex;
+  width: 100%;
+  height: 80vh;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 1200px) {
+  .container, .label {
+    height: 70vh; /* Adjust height for medium screens */
+  }
+}
+
+@media (max-width: 900px) {
+  .container, .label {
+    height: 60vh; /* Adjust height for smaller screens */
+  }
+}
+
+@media (max-width: 700px) {
+  .container, .label {
+    height: 50vh; /* Adjust height for very small screens */
+  }
+}