microbit-foundation · microbit-grace · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/index.html b/index.html
@@ -7,7 +7,10 @@
 <html lang="en" style="height: 100%">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta
+      name="viewport"
+      content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi"
+    />
     <title><%= appNameFull %></title>
     <meta property="og:title" content="<%= appNameFull %>" />
     <link rel="canonical" href="%VITE_FULL_URL%" />

diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx
@@ -1,16 +1,18 @@
-import { BoxProps, HStack } from "@chakra-ui/react";
+import { BoxProps, HStack, StackProps } from "@chakra-ui/react";
 import { ReactNode } from "react";
 
 export interface ActionBarProps extends BoxProps {
   itemsLeft?: ReactNode;
   itemsCenter?: ReactNode;
   itemsRight?: ReactNode;
+  itemsLeftProps?: StackProps;
 }
 
 const ActionBar = ({
   itemsLeft,
   itemsCenter,
   itemsRight,
+  itemsLeftProps,
   ...rest
 }: ActionBarProps) => {
   return (
@@ -20,10 +22,15 @@ const ActionBar = ({
       justifyContent="space-between"
       bgColor="brand2.500"
       h="64px"
+      gap={0}
       minH="64px"
       {...rest}
     >
-      <HStack flex={`${itemsCenter ? 1 : 4} 0`} justifyContent="flex-start">
+      <HStack
+        flex={`${itemsCenter ? 1 : 4} 0`}
+        justifyContent="flex-start"
+        {...itemsLeftProps}
+      >
         {itemsLeft}
       </HStack>
       {itemsCenter && <HStack justifyContent="center">{itemsCenter}</HStack>}

diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx
@@ -1,22 +1,19 @@
-import { As, Divider, HStack } from "@chakra-ui/react";
+import { Divider, HStack, StackProps } from "@chakra-ui/react";
 import { useDeployment } from "../deployment";
 
-const AppLogo = ({
-  color = "#FFF",
-  as,
-}: {
+interface AppLogoProps extends StackProps {
   color?: string;
-  beta?: boolean;
-  as?: As;
-}) => {
+}
+
+const AppLogo = ({ color = "#FFF", ...props }: AppLogoProps) => {
   const { AppLogo, OrgLogo } = useDeployment();
   return (
     <HStack
-      as={as}
-      spacing={4}
+      gap={4}
       userSelect="none"
       transform="scale(0.93)"
       transformOrigin="left"
+      {...props}
     >
       {OrgLogo && (
         <>

diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx
@@ -34,6 +34,7 @@ import ProjectDropTarget from "./ProjectDropTarget";
 import SaveDialogs from "./SaveDialogs";
 import SettingsMenu from "./SettingsMenu";
 import ToolbarMenu from "./ToolbarMenu";
+import HelpMenuItems from "./HelpMenuItems";
 
 interface DefaultPageLayoutProps {
   titleId?: string;
@@ -93,9 +94,10 @@ const DefaultPageLayout = ({
           spacing={0}
           bgColor="whitesmoke"
         >
-          <VStack zIndex={1} position="sticky" top={0} gap={0}>
+          <VStack zIndex={999} position="sticky" top={0} gap={0}>
             <ActionBar
               w="100%"
+              px={{ base: 3, sm: 5 }}
               itemsCenter={
                 <>
                   {showPageTitle && (
@@ -105,21 +107,41 @@ const DefaultPageLayout = ({
                   )}
                 </>
               }
-              itemsLeft={toolbarItemsLeft || <AppLogo />}
+              itemsLeft={
+                toolbarItemsLeft || (
+                  <AppLogo
+                    transform={{ base: "scale(0.8)", sm: "scale(0.93)" }}
+                  />
+                )
+              }
+              itemsLeftProps={{ width: 0 }}
               itemsRight={
                 <>
                   <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
                     {toolbarItemsRight}
                     <SettingsMenu />
                   </HStack>
-                  <HelpMenu />
+                  <HelpMenu
+                    display={{ base: "none", md: "block", lg: "block" }}
+                  />
+                  <ToolbarMenu
+                    display={{ base: "none", md: "block", lg: "none" }}
+                    variant="plain"
+                    label={intl.formatMessage({ id: "main-menu" })}
+                  >
+                    {menuItems}
+                    <LanguageMenuItem />
+                  </ToolbarMenu>
+                  {/* Toolbar items when sm window size. */}
                   <ToolbarMenu
-                    isMobile
+                    display={{ base: "block", md: "none" }}
                     variant="plain"
                     label={intl.formatMessage({ id: "main-menu" })}
                   >
                     {menuItems}
                     <LanguageMenuItem />
+                    <MenuDivider />
+                    <HelpMenuItems />
                   </ToolbarMenu>
                 </>
               }

diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
@@ -1,42 +1,32 @@
 import {
   Box,
+  BoxProps,
   IconButton,
   Menu,
   MenuButton,
-  MenuDivider,
-  MenuItem,
   MenuList,
   Portal,
   useDisclosure,
 } from "@chakra-ui/react";
 import { useRef } from "react";
-import { MdOutlineCookie } from "react-icons/md";
-import {
-  RiExternalLinkLine,
-  RiFeedbackLine,
-  RiInformationLine,
-  RiQuestionLine,
-} from "react-icons/ri";
-import { FormattedMessage, useIntl } from "react-intl";
-import FeedbackForm from "./FeedbackForm";
-import { useDeployment } from "../deployment";
+import { RiQuestionLine } from "react-icons/ri";
+import { useIntl } from "react-intl";
 import AboutDialog from "./AboutDialog";
+import FeedbackForm from "./FeedbackForm";
+import HelpMenuItems from "./HelpMenuItems";
 
-interface HelpMenuProps {
-  isMobile?: boolean;
-}
+interface HelpMenuProps extends BoxProps {}
 
 /**
  * A help button that triggers a drop-down menu with actions.
  */
-const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
+const HelpMenu = ({ ...rest }: HelpMenuProps) => {
   const aboutDialogDisclosure = useDisclosure();
   const feedbackDisclosure = useDisclosure();
   const intl = useIntl();
   const MenuButtonRef = useRef(null);
-  const deployment = useDeployment();
   return (
-    <Box display={isMobile ? { base: "block", lg: "none" } : undefined}>
+    <Box {...rest}>
       <AboutDialog
         isOpen={aboutDialogDisclosure.isOpen}
         onClose={aboutDialogDisclosure.onClose}
@@ -47,12 +37,12 @@ const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
         onClose={feedbackDisclosure.onClose}
         finalFocusRef={MenuButtonRef}
       />
-      <Menu {...rest}>
+      <Menu>
         <MenuButton
           as={IconButton}
           ref={MenuButtonRef}
           aria-label={intl.formatMessage({ id: "help-label" })}
-          size={isMobile ? "md" : "sm"}
+          size="sm"
           fontSize="2xl"
           h={12}
           w={12}
@@ -65,66 +55,7 @@ const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
         />
         <Portal>
           <MenuList>
-            {deployment.supportLinks.main && (
-              <>
-                <MenuItem
-                  as="a"
-                  href={deployment.supportLinks.main}
-                  target="_blank"
-                  rel="noopener"
-                  icon={<RiExternalLinkLine />}
-                >
-                  <FormattedMessage id="help-support" />
-                </MenuItem>
-                <MenuItem
-                  icon={<RiFeedbackLine />}
-                  onClick={feedbackDisclosure.onOpen}
-                >
-                  <FormattedMessage id="feedback" />
-                </MenuItem>
-                <MenuDivider />
-              </>
-            )}
-            {deployment.termsOfUseLink && (
-              <MenuItem
-                as="a"
-                href={deployment.termsOfUseLink}
-                target="_blank"
-                rel="noopener"
-                icon={<RiExternalLinkLine />}
-              >
-                <FormattedMessage id="terms" />
-              </MenuItem>
-            )}
-            {deployment.privacyPolicyLink && (
-              <MenuItem
-                as="a"
-                href={deployment.privacyPolicyLink}
-                target="_blank"
-                rel="noopener"
-                icon={<RiExternalLinkLine />}
-              >
-                <FormattedMessage id="privacy" />
-              </MenuItem>
-            )}
-            {deployment.compliance.manageCookies && (
-              <MenuItem
-                as="button"
-                onClick={deployment.compliance.manageCookies}
-                icon={<MdOutlineCookie />}
-              >
-                <FormattedMessage id="cookies-action" />
-              </MenuItem>
-            )}
-            {(deployment.privacyPolicyLink ||
-              deployment.compliance.manageCookies ||
-              deployment.termsOfUseLink) && <MenuDivider />}
-            <MenuItem
-              icon={<RiInformationLine />}
-              onClick={aboutDialogDisclosure.onOpen}
-            >
-              <FormattedMessage id="about" />
-            </MenuItem>
+            <HelpMenuItems />
           </MenuList>
         </Portal>
       </Menu>

diff --git a/src/components/HelpMenuItems.tsx b/src/components/HelpMenuItems.tsx
@@ -0,0 +1,95 @@
+import { MenuDivider, MenuItem, useDisclosure } from "@chakra-ui/react";
+import { useRef } from "react";
+import { MdOutlineCookie } from "react-icons/md";
+import {
+  RiExternalLinkLine,
+  RiFeedbackLine,
+  RiInformationLine,
+} from "react-icons/ri";
+import { FormattedMessage } from "react-intl";
+import { useDeployment } from "../deployment";
+import AboutDialog from "./AboutDialog";
+import FeedbackForm from "./FeedbackForm";
+
+const HelpMenuItems = () => {
+  const aboutDialogDisclosure = useDisclosure();
+  const feedbackDisclosure = useDisclosure();
+  const MenuButtonRef = useRef(null);
+  const deployment = useDeployment();
+  return (
+    <>
+      <AboutDialog
+        isOpen={aboutDialogDisclosure.isOpen}
+        onClose={aboutDialogDisclosure.onClose}
+        finalFocusRef={MenuButtonRef}
+      />
+      <FeedbackForm
+        isOpen={feedbackDisclosure.isOpen}
+        onClose={feedbackDisclosure.onClose}
+        finalFocusRef={MenuButtonRef}
+      />
+      {deployment.supportLinks.main && (
+        <>
+          <MenuItem
+            as="a"
+            href={deployment.supportLinks.main}
+            target="_blank"
+            rel="noopener"
+            icon={<RiExternalLinkLine />}
+          >
+            <FormattedMessage id="help-support" />
+          </MenuItem>
+          <MenuItem
+            icon={<RiFeedbackLine />}
+            onClick={feedbackDisclosure.onOpen}
+          >
+            <FormattedMessage id="feedback" />
+          </MenuItem>
+          <MenuDivider />
+        </>
+      )}
+      {deployment.termsOfUseLink && (
+        <MenuItem
+          as="a"
+          href={deployment.termsOfUseLink}
+          target="_blank"
+          rel="noopener"
+          icon={<RiExternalLinkLine />}
+        >
+          <FormattedMessage id="terms" />
+        </MenuItem>
+      )}
+      {deployment.privacyPolicyLink && (
+        <MenuItem
+          as="a"
+          href={deployment.privacyPolicyLink}
+          target="_blank"
+          rel="noopener"
+          icon={<RiExternalLinkLine />}
+        >
+          <FormattedMessage id="privacy" />
+        </MenuItem>
+      )}
+      {deployment.compliance.manageCookies && (
+        <MenuItem
+          as="button"
+          onClick={deployment.compliance.manageCookies}
+          icon={<MdOutlineCookie />}
+        >
+          <FormattedMessage id="cookies-action" />
+        </MenuItem>
+      )}
+      {(deployment.privacyPolicyLink ||
+        deployment.compliance.manageCookies ||
+        deployment.termsOfUseLink) && <MenuDivider />}
+      <MenuItem
+        icon={<RiInformationLine />}
+        onClick={aboutDialogDisclosure.onOpen}
+      >
+        <FormattedMessage id="about" />
+      </MenuItem>
+    </>
+  );
+};
+
+export default HelpMenuItems;
diff --git a/src/components/PercentageMeter.tsx b/src/components/PercentageMeter.tsx
@@ -50,7 +50,6 @@ const PercentageMeter = ({
                 bgColor={i === 0 || i === numTicks + 1 ? undefined : "white"}
                 w={0.5}
                 h={height}
-                zIndex={1}
               />
             ))
         }
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,6 @@ const PercentageMeter = ({ @@
                     bgColor={i === 0 || i === numTicks + 1 ? undefined : "white"}
                     w={0.5}
                     h={height}
-                    zIndex={1}
                   />
                 ))
             }
@@ Expand Down @@