From a61f43c557940ca61e0591e26788d110a21992d6 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 24 Jun 2021 14:45:52 -0300
Subject: [PATCH] fix: set max width for search options

---
 app/assets/javascripts/components/SearchOptions.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 2099169a4..8315c3a91 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -31,6 +31,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);
@@ -49,6 +50,7 @@ const SearchOptions = observer(({ appState }: Props) => {
       open={open}
       onChange={() => {
         const rect = buttonRef.current.getBoundingClientRect();
+        setMaxWidth(rect.right - 16);
         setPosition({
           top: rect.bottom,
           right: document.body.clientWidth - rect.right,
@@ -68,8 +70,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