fix(policies): fix page styles for firefox banner [C9S-63] (#2128)

app/assets/css/app.css

@@ -38,16 +38,29 @@ body {
 
 html,
 body,
-#page-wrapper,
-#content-wrapper,
-.page-content,
-#view {
+#page-wrapper {
   height: 100%;
   width: 100%;
   overflow-y: initial;
 }
 
+#content-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  width: 100%;
+  overflow-y: initial;
+}
+
+.page-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  overflow-y: initial;
+}
+
 #view {
+  flex: 1 0 auto;
   position: relative;
 }
 

app/react/azure/DashboardView/DashboardView.tsx

@@ -29,7 +29,7 @@ export function DashboardView() {
     <>
       <PageHeader title="Home" breadcrumbs={[{ label: 'Dashboard' }]} reload />
 
-      <div className="mx-4">
+      <div className="mx-4 mb-4">
         {subscriptionsQuery.data && (
           <DashboardGrid>
             <DashboardItem

app/react/components/buttons/MenuButton.tsx

@@ -89,7 +89,7 @@ export function MenuButtonLink({
       href={anchorProps.href}
       onClick={anchorProps.onClick}
       className={clsx(
-        'rounded-md px-5 py-1 text-sm leading-5 whitespace-nowrap text-[var(--text-dropdown-menu-color)] decoration-none hover:decoration-none hover:bg-[var(--bg-dropdown-hover)] hover:text-[var(--text-dropdown-menu-color)] focus:bg-[var(--bg-dropdown-hover)] focus:text-[var(--text-dropdown-menu-color)] focus-visible:outline-none focus-visible:ring-0 hover:no-underline'
+        'rounded-md px-5 py-1 text-sm leading-5 whitespace-nowrap text-[var(--text-dropdown-menu-color)] th-dark:text-[var(--text-dropdown-menu-color)] th-highcontrast:text-[var(--text-dropdown-menu-color)] decoration-none hover:decoration-none hover:bg-[var(--bg-dropdown-hover)] hover:text-[var(--text-dropdown-menu-color)] th-dark:hover:text-[var(--text-dropdown-menu-color)] th-highcontrast:hover:text-[var(--text-dropdown-menu-color)] focus:bg-[var(--bg-dropdown-hover)] focus:text-[var(--text-dropdown-menu-color)] th-dark:focus:text-[var(--text-dropdown-menu-color)] th-highcontrast:focus:text-[var(--text-dropdown-menu-color)] focus-visible:outline-none focus-visible:ring-0 hover:no-underline'
       )}
       aria-label={label}
       data-cy={dataCy}

app/react/docker/DashboardView/DashboardView.tsx

@@ -46,7 +46,7 @@ export function DashboardView() {
     <>
       <PageHeader title="Dashboard" breadcrumbs="Environment summary" reload />
 
-      <div className="mx-4 space-y-6">
+      <div className="mx-4 space-y-6 mb-4">
         <InfoPanels isAgent={isAgentEnvironment(env.Type)} />
 
         <DashboardGrid>
@@ -116,8 +116,6 @@ export function DashboardView() {
           )}
         </DashboardGrid>
       </div>
-
-      <div className="pt-6" />
     </>
   );
 

app/react/kubernetes/dashboard/DashboardView.tsx

@@ -49,7 +49,7 @@ export function DashboardView() {
           queryClient.invalidateQueries(['environments', environmentId])
         }
       />
-      <div className="col-sm-12 flex flex-col gap-y-5">
+      <div className="col-sm-12 flex flex-col gap-y-5 mb-4">
         <EnvironmentInfo />
         <DashboardGrid>
           <DashboardItem