fixed minor alignment issues after the font replacement

ui/src/collections/collectionRulesTab.js

@@ -43,7 +43,7 @@ export function collectionRulesTab(upsertData) {
                 app.components.slide(
                     () => local.showRulesInfo,
                     t.div(
-                        { className: "alert warning m-t-sm" },
+                        { className: "alert warning m-t-sm txt-sm" },
                         t.div(
                             { className: "content" },
                             t.p(null, "The following record fields are available:"),

ui/src/css/apiPreviewModal.css

@@ -17,7 +17,7 @@
 }
 
 .api-preview-sidebar {
-    width: 190px;
+    width: 195px;
     flex-shrink: 0;
     overflow: auto;
     scrollbar-width: thin;

ui/src/css/layout.css

@@ -23,11 +23,13 @@
     gap: var(--headerItemsGap);
     font-size: var(--smFontSize);
     line-height: var(--smLineHeight);
+
     /* for when the page is opened in "app" mode */
     @media (display-mode: minimal-ui) or (display-mode: standalone) {
         border-top: 1px solid var(--accentAlt1Color);
         border-bottom: 1px solid transparent;
     }
+
     .logo {
         display: inline-flex;
         vertical-align: top;

ui/src/css/vars.css

@@ -103,7 +103,7 @@
     --lgFontSize: 15px;
 
     --lineHeight: 22px;
-    --smLineHeight: 17px;
+    --smLineHeight: 15.5px; /* decimal for visual alignment */
     --lgLineHeight: 24px;
 
     --btnHeight: 45px;