From cde2a6e2d54dc1ecae16154eca0b834e7aca6010 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 18 May 2022 13:25:18 +0200
Subject: [PATCH] fix(ui): fix metric category max height calculation

---
 .../DashboardMetricSelection.tsx                      |  2 +-
 .../components/DashboardModal/DashboardModal.tsx      | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index 26c5235c6..fcdf37429 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -80,7 +80,7 @@ function DashboardMetricSelection(props) {
             </div>
             <div className="grid grid-cols-12 gap-4">
                 <div className="col-span-3">
-                    <div className="grid grid-cols-1 gap-4 py-1" style={{ maxHeight: "calc(100vh - 300px)", overflowY: 'auto' }}>
+                    <div className="grid grid-cols-1 gap-4 py-1" style={{ maxHeight: `calc(100vh - ${props.isDashboardExists ? 175 : 300}px)`, overflowY: 'auto' }}>
                         {activeCategory && widgetCategories.map((category, index) =>
                             <WidgetCategoryItem
                                 key={category.name}
diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
index 851a103a2..5ffb1c1ca 100644
--- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
@@ -37,6 +37,7 @@ function DashboardModal(props) {
         history.push(path);
         hideModal();
     }
+    const isDashboardExists = dashboard.exists()
 
     return useObserver(() => (
         <div style={{ width: '85vw' }}>
@@ -47,20 +48,20 @@ function DashboardModal(props) {
                 <div className="mb-6 flex items-end justify-between">
                     <div>
                         <h1 className="text-2xl">
-                            { dashboard.exists() ? "Add metrics to dashboard" : "Create Dashboard" }
+                            { isDashboardExists ? "Add metrics to dashboard" : "Create Dashboard" }
                         </h1>
                     </div>
                     <div>
-                        {dashboard.exists() && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
+                        {isDashboardExists && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
                     </div>
                 </div>
-                { !dashboard.exists() && (
+                { !isDashboardExists && (
                     <>
                         <DashboardForm />
                         <p>Create new dashboard by choosing from the range of predefined metrics that you care about. You can always add your custom metrics later.</p>
                     </>
                 )}
-                <DashboardMetricSelection />
+                <DashboardMetricSelection isDashboardExists={isDashboardExists} />
 
                 <div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
                     <Button
@@ -69,7 +70,7 @@ function DashboardModal(props) {
                         disabled={!dashboard.isValid || loading}
                         onClick={onSave}
                     >
-                        { dashboard.exists() ? "Add Selected to Dashboard" : "Create" }
+                        {isDashboardExists ? "Add Selected to Dashboard" : "Create" }
                     </Button>
                     <span className="ml-2 color-gray-medium">{selectedWidgetsCount} Metrics</span>
                 </div>