fix: safari zamboni and text zoom

packages/gatsby-theme-carbon/src/components/FeedbackDialog/Comment.js

@@ -1,24 +1,33 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 // eslint doesn't know about TextArea labeling
-import React from 'react';
+import React, { useState } from 'react';
 import { TextArea } from 'carbon-components-react';
+import cx from 'classnames';
 import styles from './Comment.module.scss';
 
 const Comment = () => {
+  const [focused, setFocused] = useState(false);
   const handleBlur = e => {
     e.target.scrollTop = 0;
+    setFocused(false);
   };
 
   return (
     <div className={styles.container}>
       <TextArea
+        className={styles.textarea}
         labelText="Comments (optional):"
         onBlur={handleBlur}
+        onFocus={() => setFocused(true)}
         rows={5}
         name="feedback-form-comment"
         id="feedback-form-comment"
       />
-      <div className={styles.fadeout} />
+      <div
+        className={cx(styles.fadeout, {
+          [styles.focused]: focused,
+        })}
+      />
     </div>
   );
 };

packages/gatsby-theme-carbon/src/components/FeedbackDialog/Comment.module.scss

@@ -2,7 +2,16 @@
   position: relative;
 }
 
+.textarea {
+  @include carbon--type-style('body-short-02');
+  @include carbon--breakpoint('md') {
+    @include carbon--type-style('body-short-01');
+  }
+}
+
 .fadeout {
+  // safari hate's zambonis
+  display: none;
   pointer-events: none;
   position: absolute;
   bottom: $spacing-03;
@@ -11,8 +20,11 @@
   width: calc(100% - 1rem);
   background: linear-gradient(transparent, var(--cds-ui-01));
   height: 3rem;
+  @include carbon--breakpoint('lg') {
+    display: block;
+  }
 }
 
-.container:focus-within .fadeout {
+.focused {
   opacity: 0;
 }

packages/gatsby-theme-carbon/src/components/FeedbackDialog/Form.js

@@ -40,12 +40,13 @@ const Form = ({ visible, setVisible, launchButtonRef }) => {
       path: window.location.href,
     };
 
-    fetch('https://carbon-website.netlify.com/.netlify/functions/survey', {
-      method: 'POST',
-      mode: 'no-cors',
-      credentials: 'include',
-      body: JSON.stringify(data),
-    });
+    // fetch('https://carbon-website.netlify.com/.netlify/functions/survey', {
+    //   method: 'POST',
+    //   mode: 'no-cors',
+    //   credentials: 'include',
+    //   body: JSON.stringify(data),
+    // });
+    console.log(data);
 
     setVisible(false);
   };

packages/gatsby-theme-carbon/src/util/hooks/useOnClickOutside.js

@@ -1,5 +1,20 @@
 import { useEffect } from 'react';
 
+let passiveListenerSupported;
+
+try {
+  const opts = Object.defineProperty({}, 'passive', {
+    // eslint-disable-next-line getter-return
+    get() {
+      passiveListenerSupported = true;
+    },
+  });
+  window.addEventListener('testPassive', null, opts);
+  window.removeEventListener('testPassive', null, opts);
+} catch (e) {
+  passiveListenerSupported = false;
+}
+
 function useOnClickOutside(ref, handler) {
   useEffect(() => {
     const listener = event => {
@@ -9,8 +24,16 @@ function useOnClickOutside(ref, handler) {
       handler(event);
     };
 
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
+    document.addEventListener(
+      'mousedown',
+      listener,
+      passiveListenerSupported ? { passive: true } : false
+    );
+    document.addEventListener(
+      'touchstart',
+      listener,
+      passiveListenerSupported ? { passive: true } : false
+    );
 
     return () => {
       document.removeEventListener('mousedown', listener);