@import "color.less";
@import "properties.less";
@import "page-content.less";

section.navbar-extension {
  padding: 0 @navbar-padding @navbar-padding @navbar-padding;
  margin-bottom: 0px; // Usual section margin replaced by padding
  display: flex;
  flex-direction: row;
  height: 125%;
  @media screen and (max-width: 425px) {
    // Move response list lower on small screens
    flex-direction: column;
    height: 500%;
  }
}

section.navbar-extension > div.settings {
  h1 {
    display: inline-block;
  }
  span.em-dash::after {
    content: '—';
  }
  #change-username {
    font-size: 1em;
  }
  @avatar-img-height: 128px;
  img {
    height: @avatar-img-height;
    width: @avatar-img-height;
    display: inline-block;
  }
  div.avatar-text-container {
    line-height: @avatar-img-height;
    vertical-align: top;
    display: inline-block;
  }
}

section.navbar-extension > div.user-videos {
  margin-left: 16px; // Leave some space from the settings
  flex-grow: 1;
  flex-shrink: 1;
  @media screen and (max-width: 768px) {
    flex-shrink: 2;
  }
  display: flex;
  align-items: center;
  overflow-x: auto;
}

@import "color.less";
@import "properties.less";
@import "page-content.less";

section.navbar-extension {
  padding: 0 @navbar-padding @navbar-padding @navbar-padding;
  margin-bottom: 0px; // Usual section margin replaced by padding
  display: flex;
  flex-direction: row;
  @extension-height: 900px; // Arbitrary
  height: @extension-height;
  @media screen and (max-width: 425px) {
    // Move response list lower on small screens
    flex-direction: column;
    height: @extension-height * 5;
  }
}

section.navbar-extension > div.settings {
  h1 {
    display: inline-block;
  }
  span.em-dash::after {
    content: '—';
  }
  #change-username {
    font-size: 1em;
  }
  @avatar-img-height: 128px;
  img {
    height: @avatar-img-height;
    width: @avatar-img-height;
    display: inline-block;
  }
  div.avatar-text-container {
    line-height: @avatar-img-height;
    vertical-align: top;
    display: inline-block;
  }
}

section.navbar-extension > div.user-videos {
  margin-left: 16px; // Leave some space from the settings
  flex-grow: 1;
  flex-shrink: 1;
  @media screen and (max-width: 768px) {
    flex-shrink: 2;
  }
  display: flex;
  align-items: center;
  overflow-x: auto;
}

Use fixed size vs %
Use fixed size vs %
