src/components/TableWithControlsLayout/TableWithControlsLayout.scss - main - githubmirror/ydb-embedded-ui

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

83 строки2 KB

Arun Kumar

fix(Diagnostics): align table header controls to top (#3632)

23 мар 2026, 16:04

23 мар 2026, 16:04c3adf98

@use '../../styles/mixins.scss';

.ydb-table-with-controls-layout {
    // Total height of all fixed elements above table for sticky header positioning
    --data-table-sticky-header-offset: calc(
        var(--data-table-start, 0px) + var(--ydb-table-with-controls-layout-controls-height, 62px)
    );

    display: inline-block;

    box-sizing: border-box;
    min-width: 100%;

    &_full-height {
        min-height: calc(100% - var(--sticky-tabs-height, 0px));
    }

    &__controls-wrapper {
        z-index: 3;

        align-items: var(--ydb-table-with-controls-layout-controls-align-items, center);

        box-sizing: border-box;
        width: 100%;

        @include mixins.sticky-top(var(--data-table-start, 0px));
    }

    &__controls {
        z-index: 3;

        width: max-content;
        height: var(--ydb-table-with-controls-layout-controls-height, 62px);

        @include mixins.controls(
            var(--ydb-table-with-controls-layout-controls-padding-top, var(--g-spacing-4))
        );
        @include mixins.sticky-top();
    }

    &__extra-controls {
        position: sticky;
        right: var(--extra-controls-right, 0);

        margin: 0 0 0 auto;
    }

    &__table {
        position: relative;
        z-index: 2;
    }

    &__footer-wrapper {
        position: sticky;
        z-index: 3;
        bottom: 0;

        box-sizing: border-box;
        width: 100%;

        border-top: 1px solid var(--g-color-line-generic);
        background-color: var(--g-color-base-background);
    }

    &__footer {
        position: sticky;
        left: 0;

        display: flex;

        width: max-content;
        padding: var(--g-spacing-2) var(--g-spacing-4);
    }

    .ydb-paginated-table__head {
        top: var(--data-table-sticky-header-offset, 62px);
    }

    .data-table__sticky_moving {
        // Place table head right after controls
        top: var(--data-table-sticky-header-offset, 62px) !important;
    }
}