normalized the caster to return always non-null value and fixed minor ui issues

ui/src/components/collections/CollectionRulesTab.svelte

@@ -104,7 +104,7 @@
                     <p>
                         Example rule:
                         <br />
-                        <code>@request.user.id!=null && created>"2022-01-01 00:00:00"</code>
+                        <code>@request.user.id!="" && created>"2022-01-01 00:00:00"</code>
                     </p>
                 </div>
             </div>

ui/src/components/collections/CollectionUpsertPanel.svelte

@@ -166,7 +166,7 @@
 
 <OverlayPanel
     bind:this={collectionPanel}
-    class="overlay-panel-lg colored-header collection-panel"
+    class="overlay-panel-lg colored-header compact-header collection-panel"
     beforeHide={() => {
         if (hasChanges && confirmClose) {
             confirm("You have unsaved changes. Do you really want to close the panel?", () => {

ui/src/components/collections/FieldAccordion.svelte

@@ -67,6 +67,10 @@
         field.toDelete = false; // normalize
     }
 
+    $: if (field.required) {
+        field.nullable = false;
+    }
+
     $: interactive = !disabled && !field.system && !field.toDelete && canBeStored;
 
     $: hasErrors = !CommonHelper.isEmpty(CommonHelper.getNestedVal($errors, `schema.${key}`));
@@ -154,7 +158,7 @@
         {/if}
 
         {#if expanded && !field.toDelete}
-            <div class="inline-flex flex-gap-sm flex-nowrap" in:fly={{ duration: 200, x: 20, opacity: 0 }}>
+            <div class="inline-flex flex-gap-base flex-nowrap" in:fly={{ duration: 200, x: 20, opacity: 0 }}>
                 <button
                     type="button"
                     class="btn btn-sm fade p-l-0 p-r-0"