updated nonempty label styles

ui/src/components/base/Field.svelte

@@ -45,11 +45,12 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div bind:this={container} class={classes} class:error={fieldErrors.length} on:click>
     <slot {uniqueId} />
 
     {#if inlineError && fieldErrors.length}
-        <div class="form-field-addon">
+        <div class="form-field-addon inline-error-icon">
             <i
                 class="ri-error-warning-fill txt-danger"
                 transition:scale={{ duration: 150, start: 0.7 }}

ui/src/components/collections/schema/SchemaField.svelte

@@ -132,11 +132,11 @@
             name="schema.{key}.name"
             inlineError
         >
-            <div class="markers">
-                {#if field.required}
-                    <span class="marker marker-required" use:tooltip={requiredLabel} />
-                {/if}
-            </div>
+            {#if field.required}
+                <div class="field-labels">
+                    <span class="label label-success">{requiredLabel}</span>
+                </div>
+            {/if}
 
             <div
                 class="form-field-addon prefix no-pointer-events field-type-icon"

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