From 75cefc122ecb0f91026ce7de34515efd497d6b71 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 3 Jun 2021 18:48:04 -0300
Subject: [PATCH] fix: add ellipsis overflow to tag text on note options

---
 .../javascripts/components/NotesOptions.tsx    | 18 +++++++++---------
 app/assets/stylesheets/_sn.scss                | 12 ++++++++++++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 8c80f5f5495..b2a0ac3b4b0 100644
--- 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
index 1b3edcc12f4..3d3d6cb2592 100644
--- 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.