fleet/frontend/pages/admin/SettingsWrapper/_styles.scss

@import "../../../../node_modules/react-tabs/style/react-tabs.scss";

.settings-wrapper {
  // we turn off overflow on the settings page as it seems to mess with our
  // header and navigation
  overflow: visible;

  h1 {
    display: flex;
    align-items: center;
    height: 38px;
    position: relative;

    // fake padding for h1 while sticky
      &::before {
        content: "";
        width: 100%;
        height: $pad-xxlarge;
        position: absolute;
        top: -$pad-xxlarge;
        background-color: $core-white;
      }
  }

  // These styles are here to make the sticky header and nav work correctly
  // with the sandbox mode expiry message.
  &.sandbox-mode {
    h1 {
      &::before {
        height: 0;
        top: 0;
      }
    }
  }

  .component__tabs-wrapper {
    top: $pad-xxlarge; // for sticky
    z-index: 3;
  }
}