Use grid to organise settings in admin, my-account

[github/Chocobozzz/PeerTube.git] / client / src / app / +video-channels / video-channels.component.scss

@import '_variables';
@import '_mixins';

.sub-menu {
  @include sub-menu-with-actor;

  .actor, .actor-info {
    width: 100%;
  }

  .actor-info {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto / 1fr auto;
    grid-template-areas: "name buttons" "lower buttons";

    @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
      grid-template-areas: "name name" "lower buttons";
    }
  }

  .actor-names {
    grid-area: name;
  }

  .actor-name {
    flex-grow: 1;

    .copy-button {
      border: none;
      padding: 5px;
      margin-top: -2px;
    }
  }
}

.right-buttons {
  display: flex;
  height: max-content;
  margin-left: auto;
  margin-top: 20px;

  grid-row: buttons-start / span buttons-end;
  grid-column: buttons-start;

  a {
    @include peertube-button-outline;
    line-height: 1.8;
  }

  my-subscribe-button {
    height: min-content;
  }
}