From d255057cbaa5a38f756fce77aa0daf50aa86e012 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 27 May 2021 11:18:46 -0300
Subject: [PATCH] styles: constraint tags width

---
 app/assets/javascripts/components/NoteTags.tsx |  4 +++-
 app/assets/stylesheets/_sn.scss                | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index 2db2bd1ae..6327eea30 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -35,7 +35,9 @@ const NoteTags = observer(({ application, appState }: Props) => {
           }}
         >
           <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
-          {tag.title}
+          <span className="max-w-md whitespace-nowrap overflow-hidden overflow-ellipsis">
+            {tag.title}
+          </span>
         </button>
       ))}
       <AutocompleteTagInput application={application} appState={appState} lastTagRef={lastTagRef} />
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index f7ec94559..c95842c85 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -204,6 +204,14 @@
   overflow: auto;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -220,6 +228,10 @@
   white-space: pre-wrap;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.