diff --git a/frontend/amundsen_application/static/.betterer.results b/frontend/amundsen_application/static/.betterer.results index f57dd73b11..a3036a576d 100644 --- 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 index 0641436264..1785e5d722 100644 --- 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 index 0ceb0966d2..adfad36701 100644 --- 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 index 2db399e180..6d6a7ceff9 100644 --- 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 index 9f913405cf..b45a6cd627 100644 --- 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 index fd4b1d2b4f..b6233774b1 100644 --- 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; + } } }