From 3b963873cc7224a7c9cef43346616e8454ff35b0 Mon Sep 17 00:00:00 2001
From: Ricardo M <lordrip@gmail.com>
Date: Mon, 26 Feb 2024 13:30:27 +0100
Subject: [PATCH] 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: https://github.com/KaotoIO/kaoto-next/issues/742
---
 .../PropertiesModal/PropertiesModal.scss         | 16 ++++++++++++++++
 .../PropertiesModal/PropertiesModal.tsx          |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.scss b/packages/ui/src/components/PropertiesModal/PropertiesModal.scss
index 98a937b86..9dc2c4d35 100644
--- a/packages/ui/src/components/PropertiesModal/PropertiesModal.scss
+++ b/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;
+    }
+  }
 }
diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx
index 62c485a6c..10cf8615e 100644
--- a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx
+++ b/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} />
         ) : (