fix(badges): fix search-result layout shift + unify empty/loading states

Scrollbar shift:
- Add [scrollbar-gutter:stable] to #ae_main_content in events layout so a
  scrollbar appearing on first results load no longer reflows the centered
  search form (was shifting ~8px left on Linux)

Empty/loading state consistency:
- Move search_status prop into ae_comp__badge_obj_li so it can swap its own
  empty state: spinner + "Searching..." while a search is in progress,
  UserSearch icon + prompt text otherwise
- Unify p-16 / size-3em / mb-2 / text-xl across all three states (initial
  load, searching, no results) so height never jumps between transitions
- Pass search_status from +page.svelte to the component

Transitions:
- transition:fade on initial-load spinner div
- transition:slide on Create/Upload badge button row (appears with edit mode)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/routes/events/[event_id]/(badges)/badges/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { untrack } from 'svelte';
+import { slide, fade } from 'svelte/transition';
 interface Props {
     /** @type {import('./$types').PageData} */
     data: any;
@@ -472,7 +473,7 @@ async function handle_search_refresh(params: any) {
 ></Comp_badge_search>
 
 {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
-    <div class="flex flex-row gap-1 items-center justify-center">
+    <div transition:slide={{ duration: 200 }} class="flex flex-row gap-1 items-center justify-center">
     {#if badges_loc.current.enable_add_badge_btn ?? true}
         <button
             type="button"
@@ -593,12 +594,16 @@ async function handle_search_refresh(params: any) {
 
 {#if $events_sess?.badges?.search_status === 'loading' && event_badge_id_li.length === 0}
     <div
-        class="flex flex-col items-center justify-center p-10 text-center opacity-50">
-        <LoaderCircle size="3em" class="mx-auto mb-4 animate-spin" />
+        transition:fade={{ duration: 200 }}
+        class="flex w-full flex-col items-center justify-center p-16 text-center opacity-50">
+        <LoaderCircle size="3em" class="mx-auto mb-2 animate-spin" />
         <p class="text-xl">Loading badges...</p>
     </div>
 {:else}
-    <Comp_badge_obj_li {lq__event_badge_obj_li} log_lvl={1}></Comp_badge_obj_li>
+    <Comp_badge_obj_li
+        {lq__event_badge_obj_li}
+        search_status={$events_sess?.badges?.search_status ?? null}
+        log_lvl={1} />
 {/if}
 
 <style>