fix(catalog): Provide fixed size for Properties Catalog

Currently, the Properties Modal size is determined according to its
content, meaning that long list will occupy the entire screen while
other tabs might be smaller, effectively changing the size and position
of the modal.

The fix for this is to provide a fixed size for the modal, according to
the User's viewport.

Ideally, in the future we should transform the properties modal into a
page, which will allow the user to share the link to a specific
component and properties. Ideally, it should also contain a breadcrumb
to show the user current location.

fix: #742

packages/ui/src/components/PropertiesModal/PropertiesModal.scss

@@ -25,4 +25,20 @@
   span[data-label='group'] {
     font-weight: normal;
   }
+
+  &__body {
+    height: 75vh;
+
+    @media screen and (height <= 720px) {
+      height: 100vh;
+    }
+
+    @media screen and (height <= 1080px) {
+      height: 75vh;
+    }
+
+    @media screen and (height <= 1440px) {
+      height: 60vh;
+    }
+  }
 }

packages/ui/src/components/PropertiesModal/PropertiesModal.tsx

@@ -67,8 +67,9 @@ export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props)
       onClose={props.onClose}
       ouiaId="BasicModal"
       description={description}
+      variant="large"
     >
-      <ModalBoxBody>
+      <ModalBoxBody className="properties-modal__body">
         {tabs.length === 0 ? (
           <EmptyTableState name={props.tile.name} />
         ) : (