updated nonempty label styles

ui/src/scss/_base.scss

@@ -524,6 +524,7 @@ a,
     line-height: 1;
     width: var(--thumbSize);
     height: var(--thumbSize);
+    aspect-ratio: 1;
     background: var(--baseAlt2Color);
     border-radius: var(--baseRadius);
     color: var(--txtPrimaryColor);

ui/src/scss/_schema_field.scss

@@ -55,23 +55,33 @@
         }
     }
 
-    // markers
-    .markers {
+    .field-labels {
         position: absolute;
         z-index: 1;
-        left: 3px;
-        top: 3px;
+        right: 0px;
+        top: 0px;
+        gap: 2px;
         display: inline-flex;
-        flex-direction: column;
         align-items: center;
-        gap: 5px;
-        .marker {
-            $size: 5px;
-            display: block;
-            width: $size;
-            height: $size;
-            border-radius: $size;
-            background: var(--baseAlt4Color);
+        transition: opacity var(--baseAnimationSpeed);
+        .label {
+            min-height: 0;
+            font-size: inherit;
+            padding: 0px 2px;
+            font-size: 0.7rem;
+            line-height: 0.75rem;
+            border-radius: var(--baseRadius);
+        }
+        ~ .inline-error-icon {
+            margin-top: 4px;
+            i {
+                font-size: 1rem;
+            }
+        }
+    }
+    .form-field:focus-within {
+        .field-labels {
+            opacity: 0.2;
         }
     }
 }