fix(ui): reserve scrollbar space and animate event multiselect

Always reserve vertical scrollbar space on base and v5 body
layouts to prevent content shift. Match notification event
multiselect panel open/close transitions to other listboxes.

resources/views/components/notification/event-multiselect.blade.php

@@ -34,7 +34,14 @@
             </svg>
         </button>
 
-        <div class="listbox-panel" x-show="open" x-cloak role="listbox" aria-multiselectable="true">
+        <div class="listbox-panel" x-show="open" x-cloak
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="opacity-0 -translate-y-1 scale-[0.98]"
+            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="opacity-100 translate-y-0 scale-100"
+            x-transition:leave-end="opacity-0 -translate-y-1 scale-[0.98]"
+            role="listbox" aria-multiselectable="true">
             @foreach ($events as $event)
                 <button wire:key="{{ $id }}-{{ $event['property'] }}" type="button" class="listbox-option"
                     role="option" aria-selected="{{ $event['enabled'] ? 'true' : 'false' }}"

resources/views/layouts/base.blade.php

@@ -95,7 +95,7 @@
 </head>
 @section('body')
 
-<body class="dark:text-inherit text-black">
+<body class="overflow-y-scroll dark:text-inherit text-black">
     <x-toast />
     <x-icon-tooltip />
     <script data-navigate-once>

resources/views/v5/app.blade.php

@@ -63,7 +63,7 @@
     <x-inertia::head />
 </head>
 
-<body>
+<body class="overflow-y-scroll">
     <x-inertia::app id="v5-app" />
 </body>