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

.kv-tenant-diagnostics {
    --diagnostics-margin-top: var(--g-spacing-4);
    display: flex;
    overflow: hidden;
    flex-direction: column;

    height: 100%;

    &__db-name {
        margin-top: var(--g-spacing-2);
        margin-bottom: var(--g-spacing-2);
        padding: 0 var(--g-spacing-5);
    }

    &__page-wrapper {
        --ydb-configs-controls-height: 46px;
        --ydb-configs-container-height: 100cqh;
        --ydb-table-with-controls-layout-controls-height: 44px;
        --ydb-table-with-controls-layout-controls-padding-top: 0px;
        --ydb-table-with-controls-layout-controls-align-items: flex-start;
        overflow: auto;
        flex-grow: 1;

        width: 100%;

        // Margin is not counted in height
        // thats why we need to subtract it.
        height: calc(100% - var(--diagnostics-margin-top));
        margin-top: var(--diagnostics-margin-top);
        padding: 0 var(--g-spacing-5);

        // Use container query units to fix the height to this specific container
        // This prevents inheritance issues with percentage-based calculations
        container-type: size;
    }

    &__monitoring-content {
        .ydb-response-error {
            max-width: 900px;
        }
    }
}