datahub/datahub-web/@datahub/entities/addon/styles/user/profile/_content.scss

.user-profile-content {
  $application-navbar-static-height: item-spacing(8) !default;
  $banner-alerts-height: 52px !default;
  $tablist-width: 210px;

  margin-top: item-spacing(6);

  .user-profile-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0 auto;

    &__tab-header {
      padding: item-spacing(2 4);
      font-weight: fw(normal, 6);
    }

    &__tabslist {
      top: $application-navbar-static-height;

      &--with-banner-offset {
        top: $banner-alerts-height + $application-navbar-static-height;
      }

      &.ivy-tabs-tablist {
        height: fit-content;

        &[role='tablist'] {
          box-sizing: border-box;
          border: none;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          min-width: $tablist-width;
          position: sticky;
          background-color: get-color(white);
          margin: item-spacing(2 0);
          border-radius: 2px;
          box-shadow: 0 0 0 1px get-color(black, 0.1), 0 2px 3px 0 get-color(black, 0.2);

          .user-profile-tabs {
            &__tab-container {
              width: 100%;
              display: flex;
              flex-direction: column;
              border-bottom: 1px solid get-color(black, 0.15);

              &:last-child {
                border-bottom: none;
              }
            }

            &__tab {
              &.ivy-tabs-tab {
                &[role='tab'] {
                  $set-padding: item-spacing(5);

                  margin-left: item-spacing(0);
                  padding: item-spacing(3) $set-padding;
                  width: 100%;
                  font-weight: fw(normal, 4);

                  &:first-child {
                    padding-left: $set-padding;
                  }

                  &[aria-selected='true'] {
                    color: get-color(black, 0.6);
                    background-color: get-color(slate3, 0.25);
                    font-weight: fw(normal, 6);

                    &:before {
                      background-color: transparent;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.user-profile-content-body {
  .nacho-button {
    margin-bottom: item-spacing(2);
  }

  .entity-list {
    margin-top: item-spacing(2);
  }

  padding: 0 0 0 item-spacing(4) + 2;

  &__entity-list {
    margin-top: item-spacing(2);
  }

  /// Overrides all instances of below classes to fit into our tab content structure
  .container {
    width: 100%;
  }

  .wh-main-content {
    margin-top: item-spacing(2);
  }
}