From 3444dcca454d020fc70563f046220af2b951075f Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Mon, 23 Dec 2024 19:23:17 +0100
Subject: [PATCH] fix footer position

---
 .../collection/APICollection.tsx              | 17 +++++++----
 .../collection/CollectionPermissions.tsx      |  2 +-
 .../collection/EditCollectionPanel.tsx        |  2 +-
 .../collection/EditScopePanel.tsx             |  6 ++--
 .../collection/api-collections.scss           | 29 +++++++++++++++++++
 5 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 src/app/views/sidebar/resource-explorer/collection/api-collections.scss

diff --git a/src/app/views/sidebar/resource-explorer/collection/APICollection.tsx b/src/app/views/sidebar/resource-explorer/collection/APICollection.tsx
index 048ddac1f..26849a366 100644
--- a/src/app/views/sidebar/resource-explorer/collection/APICollection.tsx
+++ b/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')}
diff --git a/src/app/views/sidebar/resource-explorer/collection/CollectionPermissions.tsx b/src/app/views/sidebar/resource-explorer/collection/CollectionPermissions.tsx
index fd1f3286a..48ec2a29a 100644
--- a/src/app/views/sidebar/resource-explorer/collection/CollectionPermissions.tsx
+++ b/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')}
diff --git a/src/app/views/sidebar/resource-explorer/collection/EditCollectionPanel.tsx b/src/app/views/sidebar/resource-explorer/collection/EditCollectionPanel.tsx
index e33d0d2af..3b4d9f92c 100644
--- a/src/app/views/sidebar/resource-explorer/collection/EditCollectionPanel.tsx
+++ b/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')}
diff --git a/src/app/views/sidebar/resource-explorer/collection/EditScopePanel.tsx b/src/app/views/sidebar/resource-explorer/collection/EditScopePanel.tsx
index ebc51851a..149cdbc96 100644
--- a/src/app/views/sidebar/resource-explorer/collection/EditScopePanel.tsx
+++ b/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')}
diff --git a/src/app/views/sidebar/resource-explorer/collection/api-collections.scss b/src/app/views/sidebar/resource-explorer/collection/api-collections.scss
new file mode 100644
index 000000000..e5101a387
--- /dev/null
+++ b/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 */
+  }
+}
\ No newline at end of file