styles: constraint tags width

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} />

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.