From bf483ab6bdfe6220e884feb38c4349e59425f507 Mon Sep 17 00:00:00 2001
From: Arsen Alkamyan <44676488+arsengit@users.noreply.github.com>
Date: Fri, 7 Oct 2022 20:02:38 +0400
Subject: [PATCH] [fix] Fix checkbox button padding issue on the Dashboard page
 (#2257)

---
 .../ExploreSection/ExploreSection.scss        | 184 +++++++++---------
 .../ExploreSection/ExploreSection.tsx         |   6 +-
 2 files changed, 98 insertions(+), 92 deletions(-)

diff --git a/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.scss b/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.scss
index d074275047..70491e581f 100644
--- a/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.scss
+++ b/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.scss
@@ -21,112 +21,114 @@
     margin-top: 1.25rem;
     padding: 0 1.5rem;
   }
-  .DataList {
-    .CompareSelectedRunsPopover__trigger {
-      margin-right: 0 !important;
-      .Icon__container {
-        margin-right: $space-xxxs;
-      }
-      .Text {
-        font-size: $text-sm;
+  .ExploreSection__content {
+    .DataList {
+      .CompareSelectedRunsPopover__trigger {
+        margin-right: 0 !important;
+        .Icon__container {
+          margin-right: $space-xxxs;
+        }
+        .Text {
+          font-size: $text-sm;
+        }
       }
-    }
 
-    .IllustrationBlock {
-      &__container {
-        padding-bottom: 0;
-      }
-      &__large__img {
-        height: 100%;
-        img {
+      .IllustrationBlock {
+        &__container {
+          padding-bottom: 0;
+        }
+        &__large__img {
           height: 100%;
+          img {
+            height: 100%;
+          }
         }
       }
-    }
-    .defaultSelectIcon {
-      border: 1.5px solid $pico-50;
-      border-radius: $border-radius-xs;
-      width: 12px;
-      height: 12px;
-    }
-    &__toolbarItems {
-      height: unset;
-      margin-left: $space-xs;
-    }
-    &__textsTable {
-      border: none;
-      padding-left: $space-xs;
-    }
-    .SearchBar {
-      width: auto;
-      min-width: 250px;
-      padding: 0 $space-sm;
-      margin-bottom: $space-xxxs;
-      .SearchInput {
-        margin-right: 0;
+      .defaultSelectIcon {
+        border: 1.5px solid $pico-50;
+        border-radius: $border-radius-xs;
+        width: 12px;
+        height: 12px;
       }
-      .MuiOutlinedInput-root {
-        background-color: $white;
+      &__toolbarItems {
+        height: unset;
+        margin-left: $space-xs;
       }
-      label {
-        font-size: $text-sm;
+      &__textsTable {
+        border: none;
+        padding-left: $space-xs;
       }
-    }
-    .selectedSelectIcon {
-      border-radius: $border-radius-xs;
-      width: 12px;
-      height: 12px;
-      background: $primary-color;
-      color: $white;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .partiallySelectedSelectIcon {
-      border-radius: $border-radius-xs;
-      width: 12px;
-      height: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .MuiCheckbox-root {
-      padding: $space-xxxs !important;
-    }
-    .BaseTable {
-      background-color: transparent;
-      &__table {
-        background-color: transparent;
-      }
-      &__header {
-        background: transparent;
-        &-row {
-          background-color: transparent;
+      .SearchBar {
+        width: auto;
+        min-width: 250px;
+        padding: 0 $space-sm;
+        margin-bottom: $space-xxxs;
+        .SearchInput {
+          margin-right: 0;
         }
-        &-cell {
-          border: none;
-          background-color: transparent;
-          padding: 0;
-          &--text {
-            font-size: 12px;
-          }
+        .MuiOutlinedInput-root {
+          background-color: $white;
+        }
+        label {
+          font-size: $text-sm;
         }
       }
-      &__row {
+      .selectedSelectIcon {
+        border-radius: $border-radius-xs;
+        width: 12px;
+        height: 12px;
+        background: $primary-color;
+        color: $white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .partiallySelectedSelectIcon {
+        border-radius: $border-radius-xs;
+        width: 12px;
+        height: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .MuiCheckbox-root {
+        padding: $space-xxxs !important;
+      }
+      .BaseTable {
         background-color: transparent;
-        box-shadow: unset;
-        &-cell {
+        &__table {
           background-color: transparent;
-          border: none;
-          padding: 0;
-          &:first-child {
+        }
+        &__header {
+          background: transparent;
+          &-row {
+            background-color: transparent;
+          }
+          &-cell {
+            border: none;
+            background-color: transparent;
             padding: 0;
+            &--text {
+              font-size: 12px;
+            }
           }
-          p {
-            max-width: 100%;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+        }
+        &__row {
+          background-color: transparent;
+          box-shadow: unset;
+          &-cell {
+            background-color: transparent;
+            border: none;
+            padding: 0;
+            &:first-child {
+              padding: 0;
+            }
+            p {
+              max-width: 100%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+            }
           }
         }
       }
diff --git a/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.tsx b/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.tsx
index 6f8b0fe952..729942b997 100644
--- a/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.tsx
+++ b/aim/web/ui/src/pages/Dashboard/components/ExploreSection/ExploreSection.tsx
@@ -44,7 +44,11 @@ function ExploreSection(): React.FunctionComponentElement<React.ReactNode> {
           <Spinner />
         </div>
       )}
-      <div className={loading ? 'ExploreSection__loading' : ''}>
+      <div
+        className={
+          loading ? 'ExploreSection__loading' : 'ExploreSection__content'
+        }
+      >
         <ExperimentsCard />
         <TagsCard />
         <DashboardBookmarks />