Merge branch 'develop' into feature/account-menu-react

app/assets/javascripts/components/NoteTag.tsx

@@ -97,7 +97,6 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
           ref={deleteTagRef}
           type="button"
           className="ml-2 -mr-1 border-0 p-0 bg-transparent cursor-pointer flex"
-          onFocus={onFocus}
           onBlur={onBlur}
           onClick={onDeleteTagClick}
         >

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -2,13 +2,19 @@ import { AppState } from '@/ui_models/app_state';
 import { toDirective, useCloseOnBlur, useCloseOnClickOutside } from './utils';
 import { observer } from 'mobx-react-lite';
 import { NotesOptions } from './NotesOptions';
-import { useRef } from 'preact/hooks';
+import { useCallback, useEffect, useRef } from 'preact/hooks';
 
 type Props = {
   appState: AppState;
 };
 
 const NotesContextMenu = observer(({ appState }: Props) => {
+  const {
+    contextMenuOpen,
+    contextMenuPosition,
+    contextMenuMaxHeight,
+  } = appState.notes;
+
   const contextMenuRef = useRef<HTMLDivElement>();
   const [closeOnBlur] = useCloseOnBlur(
     contextMenuRef,
@@ -20,13 +26,24 @@ const NotesContextMenu = observer(({ appState }: Props) => {
     (open: boolean) => appState.notes.setContextMenuOpen(open)
   );
 
-  return appState.notes.contextMenuOpen ? (
+  const reloadContextMenuLayout = useCallback(() => {
+    appState.notes.reloadContextMenuLayout();
+  }, [appState.notes]);
+
+  useEffect(() => {
+    window.addEventListener('resize', reloadContextMenuLayout);
+    return () => {
+      window.removeEventListener('resize', reloadContextMenuLayout);
+    };
+  }, [reloadContextMenuLayout]);
+
+  return contextMenuOpen ? (
     <div
       ref={contextMenuRef}
       className="sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed"
       style={{
-        ...appState.notes.contextMenuPosition,
-        maxHeight: appState.notes.contextMenuMaxHeight,
+        ...contextMenuPosition,
+        maxHeight: contextMenuMaxHeight,
       }}
     >
       <NotesOptions appState={appState} closeOnBlur={closeOnBlur} />

app/assets/javascripts/components/SearchOptions.tsx

@@ -11,6 +11,7 @@ import {
 } from '@reach/disclosure';
 import { Switch } from './Switch';
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 
 type Props = {
   appState: AppState;
@@ -31,6 +32,7 @@ const SearchOptions = observer(({ appState }: Props) => {
     top: 0,
     right: 0,
   });
+  const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto');
   const buttonRef = useRef<HTMLButtonElement>();
   const panelRef = useRef<HTMLDivElement>();
   const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
@@ -44,15 +46,27 @@ const SearchOptions = observer(({ appState }: Props) => {
     }
   }
 
+  const updateWidthAndPosition = () => {
+    const rect = buttonRef.current.getBoundingClientRect();
+    setMaxWidth(rect.right - 16);
+    setPosition({
+      top: rect.bottom,
+      right: document.body.clientWidth - rect.right,
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateWidthAndPosition);
+    return () => {
+      window.removeEventListener('resize', updateWidthAndPosition);
+    };
+  }, []);
+
   return (
     <Disclosure
       open={open}
       onChange={() => {
-        const rect = buttonRef.current.getBoundingClientRect();
-        setPosition({
-          top: rect.bottom,
-          right: document.body.clientWidth - rect.right,
-        });
+        updateWidthAndPosition();
         setOpen(!open);
       }}
     >
@@ -68,8 +82,9 @@ const SearchOptions = observer(({ appState }: Props) => {
         ref={panelRef}
         style={{
           ...position,
+          maxWidth,
         }}
-        className="sn-dropdown sn-dropdown--animated min-w-80 fixed grid gap-2 py-2"
+        className="sn-dropdown sn-dropdown--animated w-80 fixed grid gap-2 py-2"
         onBlur={closeOnBlur}
       >
         <Switch

app/assets/javascripts/components/SessionsModal.tsx

@@ -41,14 +41,14 @@ function useSessions(
     (async () => {
       setRefreshing(true);
       const response = await application.getSessions();
-      if ('error' in response || !response.data) {
+      if ('error' in response || isNullOrUndefined(response.data)) {
         if (response.error?.message) {
           setErrorMessage(response.error.message);
         } else {
           setErrorMessage('An unknown error occured while loading sessions.');
         }
       } else {
-        const sessions = response.data;
+        const sessions = response.data as RemoteSession[];
         setSessions(sessions);
         setErrorMessage('');
       }