fix: make the dialog actions responsive in collections (#3493)

* fix footer position

* fix edit scope

* remove commented code

* remove fixed container

---------

Co-authored-by: Musale Martin <[email protected]>

Author: Mnickii

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;
@@ -243,7 +244,7 @@ const APICollection: React.FC<PopupsComponent<APICollection>> = (props) => {
       )}
 
       {items && items.length > 0 ?
-        (<div style={{ height: '80vh' }}>
+        (<div>
           <Paths
             resources={items}
             columns={columns}
@@ -252,16 +253,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

@@ -102,7 +102,7 @@ const CollectionPermissions: FC<PopupsComponent<null>> = (props) => {
           {translateMessage('Microsoft Graph permissions reference')}
         </Link>
       </MessageBar>
-      <div style={{ height: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
+      <div style={{ overflowY: 'auto', overflowX: 'hidden' }}>
         <DetailsList
           items={permissionsArray}
           columns={columns}
@@ -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

@@ -36,7 +36,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({closePopup}) =
         <span style={{ fontWeight: 'bold' }}>{translateMessage('Delete all selected')}</span>
       </MessageBar>
       {items && items.length > 0 ? (
-        <div style={{ height: '80vh' }}>
+        <div>
           <Paths
             resources={items}
             columns={columns}
@@ -45,7 +45,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({closePopup}) =
           />
         </div>
       ) : (
-        <div style={{height: '80vh'}}>
+        <div>
           <Label
             style={{
               display: 'flex',
@@ -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

@@ -91,7 +91,7 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
           styles={{ dropdown: { width: 200 } }}
         />
       </div>
-      <div style={{ flex: 1, marginBottom: '1px',  maxHeight: '80vh' }}>
+      <div style={{ flex: 1, marginBottom: '1px'}}>
         <Paths
           resources={items.map(item => pendingChanges.find(change => change.key === item.key) || item)}
           columns={columns}
@@ -105,8 +105,10 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
           actionsRight: {
             display: 'flex',
             justifyContent: 'flex-start',
-            padding: '5px'
-          }
+            position: 'fixed',
+            width: '100%',
+            bottom: 0,
+            zIndex: 1}
         }}>
         <PrimaryButton onClick={saveAllScopes} disabled={pendingChanges.length === 0}>
           {translateMessage('Save all')}

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

@@ -86,7 +86,7 @@ export default class Paths extends Component<IPathProps> {
   public render(): JSX.Element {
     const { resources, columns, isSelectable } = this.props;
     return (
-      <div style={{ height: '80vh', overflowY: 'auto', overflowX: 'hidden' }}>
+      <div style={{overflowY: 'auto', overflowX: 'hidden' }}>
         <DetailsList
           items={resources}
           columns={columns}

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

@@ -0,0 +1,25 @@
+.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 */
+  }
+}