pgadmin4/web/pgadmin/static/scss/_pgadmin.grid.scss

/* The Bootstrap default grid layout is based on @media - window size
 * But in pgadmin4, we need to resize/make responsive elements based on panel size
 * which can be changed by wcDocker. Below code will generate pg-el-* classes
 * using the bootstrap grid classes generator. Based on el attribute of pg-el-container div,
 * the classes will apply.el attribute is set in /pgadmin4/web/pgadmin/browser/static/js/panel.js
 *
 * Code reused and customized from : bootstrap/scss/mixins/_grid-framework.scss
 */

@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: math.div($gutter, 2);
    padding-left: math.div($gutter, 2);
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .pg-el#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }

    .pg-el-container[el=xs]
    .pg-el#{$infix},
    .pg-el-container[el=xs]
    .pg-el#{$infix}-auto {
      @extend %grid-column;
    }


    // Provide basic `.pg-el-{bp}` classes for equal-width flexbox columns
    .pg-el-container[el=xs]
    .pg-el#{$infix} {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
  }

  @for $i from 1 through $columns {
    .pg-el-container[el=xl] {
      .pg-el-sm-#{$i} {
        @include make-col($i, $columns);
      }
      .pg-el-md-#{$i} {
        @include make-col($i, $columns);
      }
      .pg-el-lg-#{$i} {
        @include make-col($i, $columns);
      }
      .pg-el-xl-#{$i} {
        @include make-col($i, $columns);
      }
    }

    .pg-el-container[el=lg] {
      .pg-el-sm-#{$i} {
        @include make-col($i, $columns);
      }
      .pg-el-md-#{$i} {
        @include make-col($i, $columns);
      }
      .pg-el-lg-#{$i} {
        @include make-col($i, $columns);
      }
    }

    .pg-el-container[el=md] {
      .pg-el-md-#{$i} {
        @include make-col($i, $columns);
      }
      .pg-el-sm-#{$i} {
        @include make-col($i, $columns);
      }
    }

    .pg-el-container[el=sm] {
      .pg-el-sm-#{$i} {
        @include make-col($i, $columns);
      }
    }
  }

}

@include make-grid-columns();