Fix beta warning notice to the top (#351)

microbit-foundation · Oct 7, 2024 · 185abd1 · 185abd1
1 parent 3118827
commit 185abd1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/src/components/DataSampleGridView.tsx b/src/components/DataSampleGridView.tsx
@@ -24,7 +24,7 @@ const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 1fr",
   gap: 3,
   px: 10,
-  mb: 2,
+  py: 2,
   w: "100%",
 };
 

diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx
@@ -102,39 +102,39 @@ const DefaultPageLayout = ({
         spacing={0}
         bgColor="whitesmoke"
       >
-        <ActionBar
-          zIndex={2}
-          position="sticky"
-          top={0}
-          itemsCenter={
-            <>
-              {showPageTitle && (
-                <Heading size="md" fontWeight="normal" color="white">
-                  <FormattedMessage id={titleId} />
-                </Heading>
-              )}
-            </>
-          }
-          itemsLeft={toolbarItemsLeft || <AppLogo />}
-          itemsRight={
-            <>
-              <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
-                {toolbarItemsRight}
-                <SettingsMenu />
-              </HStack>
-              <HelpMenu />
-              <ToolbarMenu
-                isMobile
-                variant="plain"
-                label={intl.formatMessage({ id: "main-menu" })}
-              >
-                {menuItems}
-                <LanguageMenuItem />
-              </ToolbarMenu>
-            </>
-          }
-        />
-        {flags.preReleaseNotice && <PreReleaseNotice />}
+        <VStack zIndex={1} position="sticky" top={0} gap={0}>
+          <ActionBar
+            w="100%"
+            itemsCenter={
+              <>
+                {showPageTitle && (
+                  <Heading size="md" fontWeight="normal" color="white">
+                    <FormattedMessage id={titleId} />
+                  </Heading>
+                )}
+              </>
+            }
+            itemsLeft={toolbarItemsLeft || <AppLogo />}
+            itemsRight={
+              <>
+                <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
+                  {toolbarItemsRight}
+                  <SettingsMenu />
+                </HStack>
+                <HelpMenu />
+                <ToolbarMenu
+                  isMobile
+                  variant="plain"
+                  label={intl.formatMessage({ id: "main-menu" })}
+                >
+                  {menuItems}
+                  <LanguageMenuItem />
+                </ToolbarMenu>
+              </>
+            }
+          />
+          {flags.preReleaseNotice && <PreReleaseNotice />}
+        </VStack>
         <Flex flexGrow={1} flexDir="column">
           {children}
         </Flex>

diff --git a/src/components/PreReleaseNotice.tsx b/src/components/PreReleaseNotice.tsx
@@ -19,6 +19,7 @@ const PreReleaseNotice = () => {
         onClose={feedbackDialogDisclosure.onClose}
       />
       <Flex
+        w="100%"
         bgColor="gray.800"
         color="white"
         p={1}