chat-fe: fix overlay on FF and address review comments

pkg/interface/chat/src/js/components/lib/overlay-sigil.js

@@ -49,9 +49,18 @@ export class OverlaySigil extends Component {
       const parent = this.containerRef.current.offsetParent;
       const { offsetTop } = this.containerRef.current;
 
-      // coordinate system is inverted bc flex-row-reverse
-      const bottomSpace = parent.scrollTop - offsetTop + OVERLAY_HEIGHT / 2;
-      const topSpace = parent.clientHeight - bottomSpace - OVERLAY_HEIGHT;
+
+      let bottomSpace, topSpace;
+
+      if(navigator.userAgent.includes('Firefox')) {
+        topSpace = offsetTop - parent.scrollTop - OVERLAY_HEIGHT / 2;
+        bottomSpace = parent.clientHeight - topSpace - OVERLAY_HEIGHT;
+      } else {
+        // coordinate system is inverted bc flex-row-reverse
+        bottomSpace = parent.scrollTop - offsetTop + OVERLAY_HEIGHT / 2;
+        topSpace = parent.clientHeight - bottomSpace - OVERLAY_HEIGHT;
+
+      }
       this.setState({
         topSpace,
         bottomSpace

pkg/interface/chat/src/js/components/lib/ship-search.js

@@ -284,7 +284,7 @@ export class ShipSearchInput extends Component {
         className="b--gray2 b--solid ba absolute bg-white bg-gray0-d shadow-5"
       >
         <textarea
-          style={{ resize: "none" }}
+          style={{ resize: "none", maxWidth: '200px' }}
           className="ma2 pa2 b--gray4 ba b--solid w7 db bg-gray0-d white-d"
           rows={1}
           autocapitalise="none"
@@ -313,27 +313,3 @@ export class ShipSearchInput extends Component {
     );
   }
 }
-
-// import { useEffect } from 'react';
-
-// // via https:// usehooks.com/useOnClickOutside/
-// export default function useOnClickOutside(ref, handler) {
-//   useEffect(() => {
-//     const listener = event => {
-//       // Do nothing if clicking ref's element or descendent elements
-//       if (!ref.current || ref.current.contains(event.target)) {
-//         return;
-//       }
-
-//       handler(event);
-//     };
-
-//     document.addEventListener('mousedown', listener);
-//     document.addEventListener('touchstart', listener);
-
-//     return () => {
-//       document.removeEventListener('mousedown', listener);
-//       document.removeEventListener('touchstart', listener);
-//     };
-//   }, [ref, handler]);
-// }

pkg/interface/chat/src/js/components/new.js

@@ -16,7 +16,7 @@ export class NewScreen extends Component {
       idName: '',
       groups: [],
       ships: [],
-      security: 'village',
+      security: 'channel',
       idError: false,
       inviteError: false,
       allowHistory: true,
@@ -26,7 +26,6 @@ export class NewScreen extends Component {
 
     this.titleChange = this.titleChange.bind(this);
     this.descriptionChange = this.descriptionChange.bind(this);
-    this.securityChange = this.securityChange.bind(this);
     this.allowHistoryChange = this.allowHistoryChange.bind(this);
     this.setInvite = this.setInvite.bind(this);
     this.createGroupChange = this.createGroupChange.bind(this);
@@ -65,17 +64,6 @@ export class NewScreen extends Component {
     });
   }
 
-  securityChange(event) {
-    if (this.state.createGroup) {
-      return;
-    }
-    if (event.target.checked) {
-      this.setState({security: "village"});
-    } else if (!event.target.checked) {
-      this.setState({security: "channel"});
-    }
-  }
-
   createGroupChange(event) {
     if (event.target.checked) {
       this.setState({
@@ -85,6 +73,7 @@ export class NewScreen extends Component {
     } else {
       this.setState({
         createGroup: !!event.target.checked,
+        security: 'channel'
       });
     }
   }
@@ -283,18 +272,6 @@ export class NewScreen extends Component {
             setInvite={this.setInvite}
           />
           {createGroupToggle}
-          <div className="mv7">
-            <input
-              type="checkbox"
-              style={{ WebkitAppearance: "none", width: 28 }}
-              className={inviteSwitchClasses}
-              onChange={this.securityChange}
-            />
-            <span className="dib f9 white-d inter ml3">Invite Only Chat</span>
-            <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
-              Chat participants must be invited to see chat content
-            </p>
-          </div>
           <button
             onClick={this.onClickCreate.bind(this)}
             className={createClasses}>