Merge branch 'develop' into feature/autocomplete-tags

app/assets/javascripts/components/NotesOptions.tsx

@@ -68,11 +68,11 @@ export const NotesOptions = observer(
       const buttonRect = tagsButtonRef.current.getBoundingClientRect();
       const footerHeight = 32;
 
-      if ((buttonRect.top + maxTagsMenuSize) > (clientHeight - footerHeight)) {
+      if (buttonRect.top + maxTagsMenuSize > clientHeight - footerHeight) {
         setTagsMenuMaxHeight(clientHeight - buttonRect.top - footerHeight - 2);
       }
 
-      if ((buttonRect.right + maxTagsMenuSize) > clientWidth) {
+      if (buttonRect.right + maxTagsMenuSize > clientWidth) {
         setTagsMenuPosition({
           top: buttonRect.top,
           right: clientWidth - buttonRect.left,
@@ -84,7 +84,6 @@ export const NotesOptions = observer(
         });
       }
 
-
       setTagsMenuOpen(!tagsMenuOpen);
     };
 
@@ -165,7 +164,7 @@ export const NotesOptions = observer(
               {appState.tags.tags.map((tag) => (
                 <button
                   key={tag.title}
-                  className="sn-dropdown-item sn-dropdown-item--no-icon"
+                  className="sn-dropdown-item sn-dropdown-item--no-icon max-w-80"
                   onBlur={closeOnBlur}
                   onClick={() => {
                     appState.notes.isTagInSelectedNotes(tag)
@@ -174,11 +173,12 @@ export const NotesOptions = observer(
                   }}
                 >
                   <span
-                    className={
-                      appState.notes.isTagInSelectedNotes(tag)
-                        ? 'font-bold'
-                        : ''
-                    }
+                    className={`whitespace-nowrap overflow-hidden overflow-ellipsis
+                      ${
+                        appState.notes.isTagInSelectedNotes(tag)
+                          ? 'font-bold'
+                          : ''
+                      }`}
                   >
                     {tag.title}
                   </span>