fix: add ellipsis overflow to tag text on note options

standardnotes · Jun 3, 2021 · 75cefc1 · 75cefc1
1 parent bb6f65d
commit 75cefc1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
@@ -72,11 +72,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,
@@ -88,7 +88,6 @@ export const NotesOptions = observer(
         });
       }
 
-
       setTagsMenuOpen(!tagsMenuOpen);
     };
 
@@ -169,7 +168,7 @@ export const NotesOptions = observer(
               {appState.tags.tags.map((tag) => (
                 <button
                   key={tag.title}
-                  className={`${buttonClass} py-2`}
+                  className={`${buttonClass} py-2 max-w-80`}
                   onBlur={closeOnBlur}
                   onClick={() => {
                     appState.notes.isTagInSelectedNotes(tag)
@@ -178,11 +177,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>

diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
@@ -171,6 +171,18 @@
   align-items: flex-start;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.