From 777b1175317e16e3463a55a8487053533b5888e4 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 2 Jan 2021 12:54:00 -0700
Subject: [PATCH] fix safari specific issues

---
 hyperglass/ui/components/header/title.tsx     |  7 +++
 hyperglass/ui/components/layout/frame.tsx     | 13 +++--
 .../ui/components/layout/resetButton.tsx      | 54 +++++++++++--------
 hyperglass/ui/package.json                    |  1 +
 hyperglass/ui/pages/_app.tsx                  |  5 +-
 hyperglass/ui/yarn.lock                       | 12 +++++
 6 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/hyperglass/ui/components/header/title.tsx b/hyperglass/ui/components/header/title.tsx
index 51ba44d..52f4268 100644
--- a/hyperglass/ui/components/header/title.tsx
+++ b/hyperglass/ui/components/header/title.tsx
@@ -115,6 +115,13 @@ export const Title = (props: TTitle) => {
       flexDir="column"
       minH={titleHeight}
       justifyContent="center"
+      /* flexBasis
+        This is a fix for Safari specifically. LMGTFY: Safari flex-basis width. Nutshell: Safari
+        is stupid, in that it infers the default flex-basis from the width, 100%. Other browsers
+        don't do this. Without the below fix, the logo will appear gigantic, filling the entire
+        div up to the parent's max-width. The fix is to hard-code a flex-basis width.
+       */
+      flexBasis={{ base: '100%', lg: '33%' }}
       mt={[null, isSubmitting.value ? null : 'auto']}
       {...rest}>
       <Button
diff --git a/hyperglass/ui/components/layout/frame.tsx b/hyperglass/ui/components/layout/frame.tsx
index 55a068b..d876ca0 100644
--- a/hyperglass/ui/components/layout/frame.tsx
+++ b/hyperglass/ui/components/layout/frame.tsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { Flex } from '@chakra-ui/react';
+import { isSafari } from 'react-device-detect';
 import { If, Debugger, Greeting, Footer, Header } from '~/components';
 import { useConfig, useColorValue } from '~/context';
 import { useLGState, useLGMethods } from '~/hooks';
@@ -28,11 +29,17 @@ export const Frame = (props: TFrame) => {
       <Flex
         bg={bg}
         w="100%"
-        id="__hyperglass"
         color={color}
+        flex="1 0 auto"
         flexDir="column"
-        minHeight="100vh"
-        ref={containerRef}>
+        id="__hyperglass"
+        ref={containerRef}
+        /** minHeight
+         * This is a Safari-specific fix. Without it, the footer will appear to be "under" the
+         * viewport. Safari needs `-webkit-fill-available`, but other browsers need `100vh`.
+         * @see https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
+         */
+        minHeight={isSafari ? '-webkit-fill-available' : '100vh'}>
         <Header resetForm={handleReset} />
         <Flex
           px={2}
diff --git a/hyperglass/ui/components/layout/resetButton.tsx b/hyperglass/ui/components/layout/resetButton.tsx
index 59ebfe7..0ef7a49 100644
--- a/hyperglass/ui/components/layout/resetButton.tsx
+++ b/hyperglass/ui/components/layout/resetButton.tsx
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic';
-import { Box, Flex, Icon, IconButton, Slide } from '@chakra-ui/react';
+import { Flex, Icon, IconButton } from '@chakra-ui/react';
+import { AnimatePresence } from 'framer-motion';
+import { AnimatedDiv } from '~/components';
 import { useColorValue } from '~/context';
 import { useLGState, useOpposingColor } from '~/hooks';
 
@@ -13,27 +15,33 @@ export const ResetButton = (props: TResetButton) => {
   const bg = useColorValue('primary.500', 'primary.300');
   const color = useOpposingColor(bg);
   return (
-    <Slide direction="left" in={isSubmitting.value} unmountOnExit style={{ width: 'auto' }}>
-      <Box
-        bg={bg}
-        left={0}
-        zIndex={4}
-        bottom={24}
-        boxSize={12}
-        color={color}
-        position="fixed"
-        borderRightRadius="md"
-        mb={developerMode ? 14 : undefined}>
-        <Flex boxSize="100%" justifyContent="center" alignItems="center" {...rest}>
-          <IconButton
-            color="current"
-            variant="ghost"
-            aria-label="Reset"
-            onClick={resetForm}
-            icon={<Icon as={LeftArrow} boxSize={8} />}
-          />
-        </Flex>
-      </Box>
-    </Slide>
+    <AnimatePresence>
+      {isSubmitting.value && (
+        <AnimatedDiv
+          bg={bg}
+          left={0}
+          zIndex={4}
+          bottom={24}
+          boxSize={12}
+          color={color}
+          position="fixed"
+          animate={{ x: 0 }}
+          exit={{ x: '-100%' }}
+          borderRightRadius="md"
+          initial={{ x: '-100%' }}
+          mb={developerMode ? { base: 0, lg: 14 } : undefined}
+          transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}>
+          <Flex boxSize="100%" justifyContent="center" alignItems="center" {...rest}>
+            <IconButton
+              variant="unstyled"
+              color="current"
+              aria-label="Reset"
+              onClick={resetForm}
+              icon={<Icon as={LeftArrow} boxSize={8} />}
+            />
+          </Flex>
+        </AnimatedDiv>
+      )}
+    </AnimatePresence>
   );
 };
diff --git a/hyperglass/ui/package.json b/hyperglass/ui/package.json
index cdd088b..3140e73 100644
--- a/hyperglass/ui/package.json
+++ b/hyperglass/ui/package.json
@@ -30,6 +30,7 @@
     "next": "^10.0.4",
     "react": "^17.0.1",
     "react-countdown": "^2.2.1",
+    "react-device-detect": "^1.15.0",
     "react-dom": "^17.0.1",
     "react-fast-compare": "^3.2.0",
     "react-flow-renderer": "^8.2.3",
diff --git a/hyperglass/ui/pages/_app.tsx b/hyperglass/ui/pages/_app.tsx
index 3600022..ec6e867 100644
--- a/hyperglass/ui/pages/_app.tsx
+++ b/hyperglass/ui/pages/_app.tsx
@@ -30,7 +30,10 @@ const App = (props: TApp) => {
         <meta name="og:image" content="/images/opengraph.jpg" />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
+        />
       </Head>
       <HyperglassProvider config={config}>
         <Component {...pageProps} />
diff --git a/hyperglass/ui/yarn.lock b/hyperglass/ui/yarn.lock
index a393610..325c4e4 100644
--- a/hyperglass/ui/yarn.lock
+++ b/hyperglass/ui/yarn.lock
@@ -5466,6 +5466,13 @@ react-countdown@^2.2.1:
   dependencies:
     prop-types "^15.7.2"
 
+react-device-detect@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.15.0.tgz#5321f94ae3c4d51ef399b0502a6c739e32d0f315"
+  integrity sha512-ywjtWW04U7vaJK87IAFHhKozZhTPeDVWsfYx5CxQSQCjU5+fnMMxWZt9HnVWaNTqBEn6g8wCNWyqav7sXJrURg==
+  dependencies:
+    ua-parser-js "^0.7.23"
+
 react-dom@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
@@ -6766,6 +6773,11 @@ typescript@^4.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5"
   integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==
 
+ua-parser-js@^0.7.23:
+  version "0.7.23"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"
+  integrity sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==
+
 unherit@^1.0.4:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"