diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index 83b2d2759..75f9c4601 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -25,7 +25,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
     <div className="flex flex-wrap">
       {activeNoteTags.map((tag, index) => (
         <button
-          className={`bg-contrast border-0 rounded text-xs color-text p-1 flex items-center 
+          className={`bg-contrast border-0 rounded text-xs color-text py-0.5 pl-1 pr-2 flex items-center 
             mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`}
           ref={index === activeNoteTags.length - 1 ? lastTagRef : undefined}
           onKeyUp={(event) => {
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index df5ba8ab8..d0ca6ab23 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -61,8 +61,17 @@
   margin-right: 0.25rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
 }
 
 .py-1\.5 {