From 4f729c7287e7296c70dfa929c5d278293c59968a Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Thu, 3 Jun 2021 14:31:40 -0300
Subject: [PATCH] fix: set max width to note tag text

---
 app/assets/javascripts/components/NoteTag.tsx |  5 +---
 app/assets/stylesheets/_sn.scss               | 25 ++-----------------
 2 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/components/NoteTag.tsx b/app/assets/javascripts/components/NoteTag.tsx
index 455a35511..8d0526a78 100644
--- a/app/assets/javascripts/components/NoteTag.tsx
+++ b/app/assets/javascripts/components/NoteTag.tsx
@@ -10,8 +10,6 @@ type Props = {
 };
 
 export const NoteTag = observer(({ appState, tag }: Props) => {
-  const { tagsContainerMaxWidth } = appState.noteTags;
-
   const [showDeleteButton, setShowDeleteButton] = useState(false);
   const deleteTagRef = useRef<HTMLButtonElement>();
 
@@ -58,14 +56,13 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
         }
       }}
       className="sn-tag pl-1 pr-2 mr-2"
-      style={{ maxWidth: tagsContainerMaxWidth }}
       onClick={onTagClick}
       onKeyDown={onKeyDown}
       onFocus={onFocus}
       onBlur={onBlur}
     >
       <Icon type="hashtag" className="sn-icon--small color-info mr-1" />
-      <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
+      <span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px">
         {tag.title}
       </span>
       {showDeleteButton && (
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 15d42111b..a7b1da63b 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -186,10 +186,9 @@
   width: 2rem;
 }
 
-.max-w-60 {
-  max-width: 15rem;
+.max-w-290px {
+  max-width: 290px;
 }
-
 .max-w-xs {
   max-width: 20rem;
 }
@@ -294,30 +293,10 @@
   white-space: nowrap;
 }
 
-.transition-height {
-  transition-property: height;
-}
-
-.transition-opacity {
-  transition-property: opacity;
-}
-
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-1 {
-  opacity: 1;
-}
-
 .w-80 {
   width: 20rem;
 }
 
-.relative {
-  position: relative;
-}
-
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.