fix: Adjustments to tabs components to prevent overflows (#2278)

* fix: Adjusting layouts to fix overflowing components Signed-off-by: Josh Slaughter <[email protected]> * Updated betterer results Signed-off-by: Josh Slaughter <[email protected]> --------- Signed-off-by: Josh Slaughter <[email protected]>
amundsen-io · Dec 4, 2024 · 8d965df · 8d965df
1 parent 1586fcb
commit 8d965df
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 37 deletions.
diff --git a/frontend/amundsen_application/static/.betterer.results b/frontend/amundsen_application/static/.betterer.results
@@ -13,7 +13,7 @@ exports[`eslint`] = {
       [83, 6, 13, "Do not use setState in componentDidUpdate", "57229240"],
       [101, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
     ],
-    "js/components/OwnerEditor/index.tsx:2842129076": [
+    "js/components/OwnerEditor/index.tsx:1478889664": [
       [88, 6, 13, "Do not use setState in componentDidUpdate", "57229240"]
     ],
     "js/components/Preloader/index.tsx:958787996": [

diff --git a/frontend/amundsen_application/static/css/_layouts.scss b/frontend/amundsen_application/static/css/_layouts.scss
@@ -110,7 +110,6 @@ $close-btn-size: 24px;
       border-right: $spacer-half solid $divider;
       flex-basis: $left-panel-width;
       flex-shrink: 0;
-      min-height: min-content;
       overflow-y: auto;
       padding: 0 $spacer-3 $aside-separation-space;
 
@@ -162,7 +161,6 @@ $close-btn-size: 24px;
       border-left: $spacer-half solid $divider;
       flex-basis: $right-panel-width;
       flex-shrink: 0;
-      min-height: min-content;
       overflow-y: auto;
       padding: 0 $spacer-3 $aside-separation-space;
 
@@ -218,7 +216,6 @@ $close-btn-size: 24px;
       flex-basis: $main-content-panel-width;
       flex-grow: 1;
       flex-shrink: 0;
-      overflow-y: scroll;
       width: 0; // Required for text truncation
     }
 

diff --git a/frontend/amundsen_application/static/js/components/Table/styles.scss b/frontend/amundsen_application/static/js/components/Table/styles.scss
@@ -21,6 +21,7 @@ $selected-row-color: $indigo10;
 
 .ams-table {
   width: 100%;
+  min-width: 100%;
   max-width: 100%;
   margin-bottom: $spacer-2;
   box-sizing: border-box;
@@ -33,8 +34,12 @@ $selected-row-color: $indigo10;
   color: $text-secondary;
   box-shadow: $hover-box-shadow;
   position: sticky;
-  top: $tab-content-margin-top;
+  top: 0;
   z-index: 5;
+
+  tr > th {
+    width: auto;
+  }
 }
 
 .ams-table-heading-cell {

diff --git a/frontend/amundsen_application/static/js/components/TabsComponent/styles.scss b/frontend/amundsen_application/static/js/components/TabsComponent/styles.scss
@@ -6,13 +6,16 @@
 $side-spacing: 12px;
 
 .tabs-component {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+
   .nav.nav-tabs {
     border-bottom: 1px solid $stroke;
     background-color: $white;
     margin-top: $spacer-2;
     padding: 0 $side-spacing;
     width: 100%;
-    z-index: 5;
 
     > li {
       margin: 0 $side-spacing;
@@ -56,7 +59,14 @@ $side-spacing: 12px;
   }
 
   .tab-content {
+    overflow: hidden;
+
     .tab-pane {
+      max-height: 100%;
+      width: 100%;
+      overflow: auto;
+      position: relative;
+
       .list-group {
         margin-top: 0;
       }
@@ -67,12 +77,11 @@ $side-spacing: 12px;
     .nav.nav-tabs {
       margin-top: 0;
       padding: $spacer-2 $spacer-2 0 $spacer-2;
-      position: fixed;
+      flex: 0;
+      display: flex;
     }
 
     .tab-content {
-      margin-top: $tab-content-margin-top;
-
       .list-group-item {
         &:hover {
           z-index: 1;

diff --git a/frontend/amundsen_application/static/js/pages/TableDetailPage/index.tsx b/frontend/amundsen_application/static/js/pages/TableDetailPage/index.tsx
@@ -242,10 +242,6 @@ export class TableDetail extends React.Component<
     }
 
     document.addEventListener('keydown', this.handleEscKey);
-    window.addEventListener(
-      'resize',
-      this.handleExpandCollapseAllBtnVisibility
-    );
     this.didComponentMount = true;
   }
 
@@ -280,10 +276,6 @@ export class TableDetail extends React.Component<
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleEscKey);
-    window.removeEventListener(
-      'resize',
-      this.handleExpandCollapseAllBtnVisibility
-    );
   }
 
   handleEscKey = (event: KeyboardEvent) => {
@@ -294,19 +286,6 @@ export class TableDetail extends React.Component<
     }
   };
 
-  handleExpandCollapseAllBtnVisibility = () => {
-    const { isRightPanelOpen } = this.state;
-    const minWidth = isRightPanelOpen
-      ? Constants.MIN_WIDTH_DISPLAY_BTN_WITH_OPEN_PANEL
-      : Constants.MIN_WIDTH_DISPLAY_BTN;
-    let newState = { isExpandCollapseAllBtnVisible: false };
-
-    if (window.matchMedia(`(min-width: ${minWidth}px)`).matches) {
-      newState = { isExpandCollapseAllBtnVisible: true };
-    }
-    this.setState(newState);
-  };
-
   getDefaultTab() {
     return getUrlParam(TAB_URL_PARAM) || Constants.TABLE_TAB.COLUMN;
   }

diff --git a/frontend/amundsen_application/static/js/pages/TableDetailPage/styles.scss b/frontend/amundsen_application/static/js/pages/TableDetailPage/styles.scss
@@ -60,10 +60,6 @@ $width-increment-5: $width-increment * 5;
     }
   }
 
-  .has-open-right-panel .nav.nav-tabs {
-    width: calc(100% - #{$total-panel-width});
-  }
-
   @media (max-width: $base-max-width) {
     .has-open-right-panel .nav.nav-tabs {
       width: calc(100% - #{$total-panel-width - $width-increment-1});
@@ -113,20 +109,40 @@ $width-increment-5: $width-increment * 5;
   }
 
   .column-tab-action-buttons {
-    background-color: $body-bg;
+    background-color: transparent;
     display: flex;
     align-items: center;
     gap: $spacer-2;
-    position: fixed;
+    position: absolute;
     z-index: 6;
     padding: 20px $spacer-2 3px $spacer-1;
 
+    @mixin action-button-positions {
+      right: unset;
+      position: relative;
+      padding: 8px 0px 0px 14px;
+      margin-bottom: -16px;
+      gap: unset;
+
+      > button {
+        padding-right: 0px;
+      }
+    }
+
     &.has-closed-right-panel {
       right: 0;
+
+      @media (max-width: calc(#{$base-max-width - $width-increment-1})) {
+        @include action-button-positions;
+      }
     }
 
     &.has-open-right-panel {
-      right: calc(#{$right-panel-width});
+      right: 0;
+
+      @media (max-width: calc(#{$base-max-width + $width-increment-3})) {
+        @include action-button-positions;
+      }
     }
   }