check the mime type of the collections file field and updated field styles to minimize the layout shifts

ui/src/components/base/OverlayPanel.svelte

@@ -167,34 +167,34 @@
             contentScrollClass = "";
         }
 
-        if (!panel) {
+        if (!panel || contentScrollThrottle) {
             return;
         }
 
-        if (!contentScrollThrottle) {
-            contentScrollThrottle = setTimeout(() => {
-                clearTimeout(contentScrollThrottle);
-                contentScrollThrottle = null;
+        contentScrollThrottle = setTimeout(() => {
+            clearTimeout(contentScrollThrottle);
+            contentScrollThrottle = null;
 
-                if (!panel) {
-                    return; // deleted during timeout
-                }
+            console.log("here");
 
-                let heightDiff = panel.scrollHeight - panel.offsetHeight;
-                if (heightDiff > 0) {
-                    contentScrollClass = "scrollable";
-                } else {
-                    contentScrollClass = "";
-                    return; // no scroll
-                }
+            if (!panel) {
+                return; // deleted during timeout
+            }
 
-                if (panel.scrollTop == 0) {
-                    contentScrollClass += " scroll-top-reached";
-                } else if (panel.scrollTop + panel.offsetHeight == panel.scrollHeight) {
-                    contentScrollClass += " scroll-bottom-reached";
-                }
-            }, 100);
-        }
+            let heightDiff = panel.scrollHeight - panel.offsetHeight;
+            if (heightDiff > 0) {
+                contentScrollClass = "scrollable";
+            } else {
+                contentScrollClass = "";
+                return; // no scroll
+            }
+
+            if (panel.scrollTop == 0) {
+                contentScrollClass += " scroll-top-reached";
+            } else if (panel.scrollTop + panel.offsetHeight == panel.scrollHeight) {
+                contentScrollClass += " scroll-bottom-reached";
+            }
+        }, 100);
     }
 
     onMount(() => {

ui/src/components/records/RecordFilePicker.svelte

@@ -37,7 +37,17 @@
     $: fileCollections = $collections.filter((c) => {
         return (
             c.type !== "view" &&
-            !!CommonHelper.toArray(c.schema).find((f) => f.type === "file" && !f.options?.protected)
+            !!CommonHelper.toArray(c.schema).find((f) => {
+                return (
+                    // is file field
+                    f.type === "file" &&
+                    // is public (aka. doesn't require file token)
+                    !f.options?.protected &&
+                    // allow any MIME type OR image/*
+                    (!f.options?.mimeTypes?.length ||
+                        !!f.options?.mimeTypes?.find((t) => t.startsWith("image/")))
+                );
+            })
         );
     });
 
@@ -280,7 +290,7 @@
                         {/each}
                     {:else if !isLoading}
                         <div class="inline-flex">
-                            <span class="txt txt-hint">No records found.</span>
+                            <span class="txt txt-hint">No records with images found.</span>
                             {#if filter?.length}
                                 <button
                                     type="button"