diff --git a/src/app.scss b/src/app.scss
index 05fef0b208..b15ebc0a61 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -203,15 +203,6 @@
text-align: right;
}
-.awx-orgTabs-container{
- display: flex
-}
-
-.awx-orgTabs__bottom-border{
- flex-grow: 1;
- border-bottom: 1px solid #d2d2d2
-}
-
//
// AlertModal styles
//
diff --git a/src/components/Tabs/RoutedTabs.jsx b/src/components/Tabs/RoutedTabs.jsx
index 4100e766b6..2e2b5b4991 100644
--- a/src/components/Tabs/RoutedTabs.jsx
+++ b/src/components/Tabs/RoutedTabs.jsx
@@ -1,7 +1,35 @@
import React from 'react';
import { shape, string, number, arrayOf } from 'prop-types';
-import { Tab, Tabs } from '@patternfly/react-core';
+import { Tab, Tabs as PFTabs } from '@patternfly/react-core';
import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Tabs = styled(PFTabs)`
+ --pf-c-tabs__button--PaddingLeft: 20px;
+ --pf-c-tabs__button--PaddingRight: 20px;
+
+ .pf-c-tabs__list {
+ li:first-of-type .pf-c-tabs__button {
+ &::before {
+ border-left: none;
+ }
+ &::after {
+ margin-left: 0;
+ }
+ }
+ }
+
+ &::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ content: "";
+ border: solid var(--pf-c-tabs__item--BorderColor);
+ border-width: var(--pf-c-tabs__item--BorderWidth) 0 var(--pf-c-tabs__item--BorderWidth) 0;
+ }
+`;
function RoutedTabs (props) {
const { history, tabsArray } = props;
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 71100980f7..0c043dffbd 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
-import { Card, CardHeader, PageSection } from '@patternfly/react-core';
+import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core';
import CardCloseButton from '../../../../components/CardCloseButton';
import ContentError from '../../../../components/ContentError';
import OrganizationAccess from './OrganizationAccess';
@@ -12,6 +12,7 @@ import OrganizationNotifications from './OrganizationNotifications';
import OrganizationTeams from './OrganizationTeams';
import RoutedTabs from '../../../../components/Tabs/RoutedTabs';
import { OrganizationsAPI } from '../../../../api';
+import styled from 'styled-components';
class Organization extends Component {
constructor (props) {
@@ -130,23 +131,24 @@ class Organization extends Component {
});
}
+ const CardHeader = styled(PFCardHeader)`
+ --pf-c-card--first-child--PaddingTop: 0;
+ --pf-c-card--child--PaddingLeft: 0;
+ --pf-c-card--child--PaddingRight: 0;
+ position: relative;
+ `;
+
let cardHeader = (
-
-
-
-
-
+ loading ? '' : (
+
+
+
+
+ )
);
if (!isInitialized) {