From 08f9e3965eac3c0fdfdfc49df4cb3e97cd94d9de Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 28 Jun 2022 15:24:48 +0200
Subject: [PATCH] fix(ui): fix metric tables height and button placing

---
 .../CustomMetricTable/CustomMetricTable.tsx                | 2 +-
 frontend/app/components/Dashboard/Widgets/common/Table.js  | 7 ++++---
 .../components/Dashboard/Widgets/common/table.module.css   | 5 ++++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
index 272a886f9..a5e8425d4 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@@ -49,7 +49,7 @@ function CustomMetricTable(props: Props) {
         onClick(filters);
     }
     return (
-        <div className="" style={{ height: '240px'}}>
+        <div className="" style={{ maxHeight: '240px'}}>
            <NoContent show={data.values && data.values.length === 0} size="small">
                 <Table
                     small
diff --git a/frontend/app/components/Dashboard/Widgets/common/Table.js b/frontend/app/components/Dashboard/Widgets/common/Table.js
index d1970b1cb..c4a754099 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Table.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Table.js
@@ -24,6 +24,7 @@ export default class Table extends React.PureComponent {
     } = this.props;
     const { showAll } = this.state;
 
+    const isShowMoreButtonVisible = !isTemplate && rows.size > (small ? 3 : 5) && !showAll
     return (
       <div className="w-full">
         <div className="flex">
@@ -37,7 +38,7 @@ export default class Table extends React.PureComponent {
         <div className={ cn(stl.content, "thin-scrollbar") } style={{ maxHeight: maxHeight + 'px'}}>
           { rows.take(showAll ? rows.size : (small ? 3 : 5)).map(row => (
             <div
-              className={ cn(rowClass, stl.row, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
+              className={ cn(rowClass, stl.row, { [stl.bottomBorder]: isShowMoreButtonVisible }, { [stl.small]: small, 'cursor-pointer' : !!onRowClick}) }
               key={ row.key }
               onClick={onRowClick ? (e) => onRowClick(e, row) : () => null}
             >
@@ -51,8 +52,8 @@ export default class Table extends React.PureComponent {
             </div>
           )) }
         </div>
-        { !isTemplate && rows.size > (small ? 3 : 5) && !showAll &&
-            <div className="w-full flex justify-center mt-3">
+        {isShowMoreButtonVisible &&
+            <div className="w-full flex justify-center mt-2">
               <Button
                 onClick={ this.onLoadMoreClick }
                 variant="text-primary"
diff --git a/frontend/app/components/Dashboard/Widgets/common/table.module.css b/frontend/app/components/Dashboard/Widgets/common/table.module.css
index 648f5bba5..d49c52040 100644
--- a/frontend/app/components/Dashboard/Widgets/common/table.module.css
+++ b/frontend/app/components/Dashboard/Widgets/common/table.module.css
@@ -22,7 +22,6 @@
 
 .row {
   display: flex;
-  border-bottom: 1px solid #EFEFEF;
   align-items: center;
   min-height: 54px;
   font-size: 13px;
@@ -37,3 +36,7 @@
     background-color: $gray-lightest;
   }
 }
+
+.bottomBorder {
+  border-bottom: 1px solid #EFEFEF;
+}