fix: set max width to note tag text

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 && (

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.