feat: modify current tags to v4 style

app/assets/stylesheets/_editor.scss

@@ -106,7 +106,6 @@ $heading-height: 75px;
     .tags-input {
       background-color: transparent;
       color: var(--sn-stylekit-foreground-color);
-      width: 100%;
       border: none;
 
       &:focus {

app/assets/stylesheets/_sn.scss

@@ -53,6 +53,14 @@
   margin-bottom: 0.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .py-1\.5  {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -167,10 +175,18 @@
   overflow-y: scroll;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .items-start {
   align-items: flex-start;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.
@@ -205,6 +221,11 @@
   @extend .fill-current;
 }
 
+.sn-icon.small {
+  @extend .h-3\.5;
+  @extend .w-3\.5;
+}
+
 .sn-dropdown {
   @extend .bg-default;
   @extend .min-w-80;