lila/ui/analyse/css/study/relay/_embed.scss

$vp-min-width: 320px;
$vp-max-width: 1200px;
$embed-uniboard-table: minmax(#{$col3-uniboard-table-min}, 800px);

body {
  ---site-header-height: 0px;
  ---site-header-margin: 0px;
  ---site-header-sticky-padding: 0px;
  ---main-margin: 0px;
  ---sticky-gap: 0px;
  ---block-gap: 10px;
  ---zoom: 95 !important;
  ---col2-board-width: calc(min(calc(100vw - 340px), calc(100vh - 45px * 2)));

  @media (min-width: at-least($small)) {
    ---main-margin: 1vw;
    ---block-gap: 15px;

    overflow-y: hidden;
  }
}

/* game view */
main.analyse.is-relay:not(.has-relay-tour) {
  /* In embed mode we don't want any space on the sides. Make the table expand to the full width */
  @include mq-at-least-col2 {
    grid-template-columns: var(---col2-board-width) $analyse-block-gap $embed-uniboard-table;
    grid-template-rows: repeat(2, calc(50vh - 1.5rem)) 3rem;
    grid-template-areas:
      'board gauge side'
      'board gauge tools'
      'board . controls';

    .main-board {
      align-self: center;
    }

    .relay-tour__side {
      margin-top: 0;
    }
  }

  @include mq-is-col1 {
    .main-board {
      /* space for the top player bar */
      margin-top: $player-height;
    }
  }

  cg-resize {
    display: none;
  }

  .analyse__controls .features {
    flex: 0 0 2.5rem;
  }

  &,
  .analyse__tools {
    /* undo the site negative margins for player names */
    margin-top: 0;
  }
}

/* tour view */
main.is-relay.has-relay-tour {
  grid-template-areas: 'relay-tour' 'side';

  @include mq-at-least-col2 {
    /* Same column layout as in the game view */
    grid-template-columns: var(---col2-board-width) $analyse-block-gap $embed-uniboard-table;
    grid-template-rows: 100vh;
    grid-template-areas: 'relay-tour . side';
  }
}

.relay-tour__markup,
.relay-tour__team-table,
.study__multiboard,
.fide-player {
  overflow-y: auto;
}