fix(web): prevent preview alert from adding scroll to the page layout

Author: ivan-aksamentov

packages_rs/nextclade-web/src/components/Common/PreviewWarning.tsx

@@ -19,7 +19,7 @@ export function PreviewWarning() {
   }
 
   return (
-    <UncontrolledAlert color="warning" className="text-center m-0">
+    <UncontrolledAlert color="warning" className="text-center m-0" fade={false}>
       <span>{warningText}</span>
       <span>
         <LinkExternal href={RELEASE_URL}>{RELEASE_URL}</LinkExternal>

packages_rs/nextclade-web/src/components/Layout/Layout.tsx

@@ -1,4 +1,6 @@
 import React, { PropsWithChildren, HTMLProps } from 'react'
+import { BrowserWarning } from 'src/components/Common/BrowserWarning'
+import { PreviewWarning } from 'src/components/Common/PreviewWarning'
 import styled from 'styled-components'
 
 import { NavigationBar } from './NavigationBar'
@@ -34,6 +36,8 @@ const FooterWrapper = styled.footer``
 export function Layout({ children }: PropsWithChildren<HTMLProps<HTMLDivElement>>) {
   return (
     <Container>
+      <PreviewWarning />
+      <BrowserWarning />
       <HeaderWrapper>
         <NavigationBar />
       </HeaderWrapper>

packages_rs/nextclade-web/src/pages/_app.tsx

@@ -8,7 +8,6 @@ import { RecoilEnv, RecoilRoot, useRecoilCallback, useRecoilState, useRecoilValu
 import { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
-import { BrowserWarning } from 'src/components/Common/BrowserWarning'
 import { sanitizeError } from 'src/helpers/sanitizeError'
 import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
 import i18nAuspice, { changeAuspiceLocale } from 'src/i18n/i18n.auspice'
@@ -55,7 +54,6 @@ import {
   minimizerIndexVersionAtom,
 } from 'src/state/dataset.state'
 import { ErrorBoundary } from 'src/components/Error/ErrorBoundary'
-import { PreviewWarning } from 'src/components/Common/PreviewWarning'
 
 import 'src/styles/global.scss'
 
@@ -209,8 +207,6 @@ export function MyApp({ Component, pageProps, router }: AppProps) {
                     </Suspense>
                     <Suspense fallback={fallback}>
                       <SEO />
-                      <PreviewWarning />
-                      <BrowserWarning />
                       <Component {...pageProps} />
                       <ErrorPopup />
                       <ReactQueryDevtools initialIsOpen={false} />