SONAR-18868 Fix Main and Top Bars positionning

server/sonar-web/design-system/src/components/MainAppBar.tsx

@@ -25,19 +25,14 @@ import {
   LAYOUT_LOGO_MARGIN_RIGHT,
   LAYOUT_LOGO_MAX_HEIGHT,
   LAYOUT_LOGO_MAX_WIDTH,
+  LAYOUT_VIEWPORT_MIN_WIDTH,
 } from '../helpers/constants';
 import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
 
-const MainAppBarContainerDiv = styled.div`
-  height: ${LAYOUT_GLOBAL_NAV_HEIGHT}px;
-`;
-
 const MainAppBarDiv = styled.div`
-  ${tw`sw-fixed`}
+  ${tw`sw-sticky sw-top-0`}
   ${tw`sw-flex`};
   ${tw`sw-items-center`};
-  ${tw`sw-left-0`};
-  ${tw`sw-right-0`};
   ${tw`sw-px-6`};
   ${tw`sw-w-full`};
   ${tw`sw-box-border`};
@@ -47,6 +42,7 @@ const MainAppBarDiv = styled.div`
   border-bottom: ${themeBorder('default')};
   color: ${themeContrast('mainBar')};
   height: ${LAYOUT_GLOBAL_NAV_HEIGHT}px;
+  min-width: ${LAYOUT_VIEWPORT_MIN_WIDTH}px;
 `;
 
 const MainAppBarNavLogoDiv = styled.div`
@@ -75,15 +71,13 @@ export function MainAppBar({
   Logo,
 }: React.PropsWithChildren<{ Logo: React.ElementType }>) {
   return (
-    <MainAppBarContainerDiv>
-      <MainAppBarDiv>
-        <MainAppBarNavLogoDiv>
-          <MainAppBarNavLogoLink href="/">
-            <Logo />
-          </MainAppBarNavLogoLink>
-        </MainAppBarNavLogoDiv>
-        <MainAppBarNavRightDiv>{children}</MainAppBarNavRightDiv>
-      </MainAppBarDiv>
-    </MainAppBarContainerDiv>
+    <MainAppBarDiv>
+      <MainAppBarNavLogoDiv>
+        <MainAppBarNavLogoLink href="/">
+          <Logo />
+        </MainAppBarNavLogoLink>
+      </MainAppBarNavLogoDiv>
+      <MainAppBarNavRightDiv>{children}</MainAppBarNavRightDiv>
+    </MainAppBarDiv>
   );
 }

server/sonar-web/design-system/src/components/TopBar.tsx

@@ -18,33 +18,22 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
 import tw from 'twin.macro';
-import { LAYOUT_GLOBAL_NAV_HEIGHT } from '../helpers';
+import { LAYOUT_GLOBAL_NAV_HEIGHT, LAYOUT_VIEWPORT_MIN_WIDTH } from '../helpers';
 import { themeColor, themeContrast } from '../helpers/theme';
 
-interface Props {
-  id?: string;
-}
-
-export function TopBar({
-  children,
-  ...props
-}: PropsWithChildren<Props> & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
-  return (
-    <BaseStyle style={{ top: LAYOUT_GLOBAL_NAV_HEIGHT }} {...props}>
-      {children}
-    </BaseStyle>
-  );
-}
-
-const BaseStyle = styled.nav`
-  ${tw`sw-sticky`}
+export const TopBar = styled.nav`
+  ${tw`sw-sticky sw-top-0`}
   ${tw`sw-z-top-navbar`}
   ${tw`sw-px-6 sw-pt-4`}
+  ${tw`sw-box-border`};
+  ${tw`sw-w-full`};
   ${tw`sw-font-sans`}
   ${tw`sw-text-sm`}
 
+  min-width: ${LAYOUT_VIEWPORT_MIN_WIDTH}px;
+  top: ${LAYOUT_GLOBAL_NAV_HEIGHT}px;
+
   background-color: ${themeColor('navbar')};
   color: ${themeContrast('navbar')};
 `;

server/sonar-web/src/main/js/app/components/AdminContainer.tsx

@@ -122,7 +122,7 @@ export class AdminContainer extends React.PureComponent<AdminContainerProps, Sta
     const adminPagesContext: AdminPagesContext = { adminPages };
 
     return (
-      <div>
+      <>
         <Helmet
           defer={false}
           titleTemplate={translateWithParameters(
@@ -147,7 +147,7 @@ export class AdminContainer extends React.PureComponent<AdminContainerProps, Sta
         >
           <Outlet context={adminPagesContext} />
         </AdminContext.Provider>
-      </div>
+      </>
     );
   }
 }

server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/AdminContainer-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<div>
+<Fragment>
   <Helmet
     defer={false}
     encodeSpecialCharacters={true}
@@ -43,5 +43,5 @@ exports[`should render correctly 1`] = `
       }
     />
   </ContextProvider>
-</div>
+</Fragment>
 `;