fix: correct CTA buttons

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

@@ -1,9 +1,10 @@
 import {
   Button,
-  DialogActions,
   makeStyles,
   MessageBar,
-  MessageBarBody
+  MessageBarBody,
+  DrawerFooter,
+  tokens
 } from '@fluentui/react-components';
 import { ReactNode } from 'react';
 import { translateMessage } from '../../../../utils/translate-messages';
@@ -19,17 +20,19 @@ interface CommonCollectionsPanelProps {
 }
 
 const useStyles = makeStyles({
-  dialogFooter: {
+  drawerFooter: {
     display: 'flex',
-    justifyContent: 'start',
+    justifyContent: 'flex-start',
     position: 'sticky',
     bottom: 0,
     width: '100%',
-    marginBlockStart: '10px',
-    zIndex: 1
+    gap: tokens.spacingHorizontalXXXL,
+    paddingInline: tokens.spacingHorizontalL,
+    paddingBlock: tokens.spacingVerticalL,
+    paddingLeft: 0
   },
   messageBar: {
-    marginInlineStart: '15px',
+    marginInlineStart: tokens.spacingHorizontalM,
     width: '100%'
   }
 });
@@ -58,14 +61,14 @@ const CommonCollectionsPanel: React.FC<CommonCollectionsPanelProps> = ({
         </MessageBarBody>
       </MessageBar> : null}
       {children}
-      <DialogActions className={styles.dialogFooter}>
+      <DrawerFooter className={styles.drawerFooter}>
         <Button appearance="primary" onClick={primaryButtonAction} disabled={primaryButtonDisabled}>
           {translateMessage(primaryButtonText)}
         </Button>
         <Button onClick={closePopup}>
           {translateMessage('Close')}
         </Button>
-      </DialogActions>
+      </DrawerFooter>
     </>
   );
 };

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

@@ -8,9 +8,6 @@ import { useAppDispatch, useAppSelector } from '../../../../../store';
 import CommonCollectionsPanel from './CommonCollectionsPanel';
 
 const useStyles = makeStyles({
-  container: {
-    height: '80vh'
-  },
   centeredLabel: {
     display: 'flex',
     width: '100%',
@@ -61,7 +58,7 @@ const EditCollectionPanel: React.FC<EditCollectionPanelProps> = ({ closePopup })
           />
         </div>
       ) : (
-        <div className={styles.container}>
+        <div>
           <Label className={styles.centeredLabel}>
             {translateMessage('No items available')}
           </Label>

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

@@ -16,9 +16,6 @@ import { formatScopeLabel, scopeOptions } from './collection.util';
 import CommonCollectionsPanel from './CommonCollectionsPanel';
 
 const useStyles = makeStyles({
-  container: {
-    height: '80vh'
-  },
   dropdownContainer: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -114,7 +111,7 @@ const EditScopePanel: React.FC<EditScopePanelProps> = ({ closePopup }) => {
           ))}
         </Dropdown>
       </div>
-      <div className={styles.container}>
+      <div>
         <Paths
           resources={items.map(item => pendingChanges.find(change => change.key === item.key) || item)}
           columns={columns}