SONAR-20337 Layout changes for quality gate main content

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
index 4eaf22bbfd9ae78492c0b534878bf570c903d142..d2781723d6af48b79626d7f649739b005f0c4fe4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx
@@ -58,6 +58,8 @@ interface State {
   qualityGates: QualityGate[];
 }
 
+const MAIN_CONTENT_TOP_PADDING = 48;
+
 class App extends React.PureComponent<Props, State> {
   mounted = false;
   state: State = { canCreate: false, loading: true, qualityGates: [] };
@@ -134,22 +136,34 @@ class App extends React.PureComponent<Props, State> {
         <div className="sw-grid sw-gap-x-12 sw-gap-y-6 sw-grid-cols-12 sw-w-full">
           <Suggestions suggestions="quality_gates" />
 
-          <ContentWrapper className="sw-col-span-3 sw-px-4 sw-py-6">
+          <StyledContentWrapper
+            className="sw-col-span-3 sw-px-4 sw-py-6 sw-border-t-0 sw-rounded-0"
+            style={{
+              height: `calc(100vh - ${LAYOUT_GLOBAL_NAV_HEIGHT + LAYOUT_FOOTER_HEIGHT}px)`,
+            }}
+          >
             <ListHeader canCreate={canCreate} refreshQualityGates={this.fetchQualityGates} />
             <Spinner loading={this.state.loading}>
               <List qualityGates={qualityGates} currentQualityGate={name} />
             </Spinner>
-          </ContentWrapper>
+          </StyledContentWrapper>
 
           {name !== undefined && (
-            <ContentWrapper className="sw-col-span-9 sw-overflow-y-auto">
+            <StyledContentWrapper
+              className="sw-col-span-9 sw-overflow-y-auto sw-mt-12"
+              style={{
+                height: `calc(100vh - ${
+                  LAYOUT_GLOBAL_NAV_HEIGHT + LAYOUT_FOOTER_HEIGHT
+                }px - ${MAIN_CONTENT_TOP_PADDING}px)`,
+              }}
+            >
               <Details
                 qualityGateName={name}
                 onSetDefault={this.handleSetDefault}
                 qualityGates={this.state.qualityGates}
                 refreshQualityGates={this.fetchQualityGates}
               />
-            </ContentWrapper>
+            </StyledContentWrapper>
           )}
         </div>
       </LargeCenteredLayout>
@@ -157,19 +171,6 @@ class App extends React.PureComponent<Props, State> {
   }
 }
 
-function ContentWrapper({ className, children }: React.PropsWithChildren<{ className: string }>) {
-  return (
-    <StyledContentWrapper
-      className={className}
-      style={{
-        height: `calc(100vh - ${LAYOUT_GLOBAL_NAV_HEIGHT + LAYOUT_FOOTER_HEIGHT}px)`,
-      }}
-    >
-      {children}
-    </StyledContentWrapper>
-  );
-}
-
 export default function AppWrapper() {
   const params = useParams();
   const navigate = useNavigate();
@@ -179,8 +180,9 @@ export default function AppWrapper() {
 
 const StyledContentWrapper = withTheme(styled.div`
   box-sizing: border-box;
-
+  border-radius: 4px;
   background-color: ${themeColor('filterbar')};
-  border-right: ${themeBorder('default', 'filterbarBorder')};
+  border: ${themeBorder('default', 'filterbarBorder')};
+  border-bottom: none;
   overflow-x: hidden;
 `);