Merge pull request #82 from opcodesio/bug/missing-transform-origin-for-dropdown

bring back transform origins to dropdowns, including those dropping up

Author: arukompas

public/app.css

@@ -358,6 +358,12 @@ html.dark {
 .dropdown {
     @apply absolute top-full z-40 right-1 -mt-1 overflow-hidden text-gray-900 dark:text-gray-200 rounded-md bg-white border-gray-200 dark:bg-gray-800 border dark:border-gray-700 shadow-md;
 
+    transform-origin: top right !important;
+
+    &.up {
+        transform-origin: bottom right !important;
+    }
+
     &.up {
         @apply top-auto bottom-full mt-0 -mb-1;
     }

resources/css/app.scss

@@ -40,10 +40,14 @@
                 <div
                     x-ref="panel"
                     x-show="open"
-                    x-transition
+                    x-transition:enter="transition ease-out duration-100"
+                    x-transition:enter-start="opacity-0 scale-90"
+                    x-transition:enter-end="opacity-100 scale-100"
+                    x-transition:leave="transition ease-in duration-100"
+                    x-transition:leave-start="opacity-100 scale-100"
+                    x-transition:leave-end="opacity-0 scale-90"
                     x-on:click.outside="close($refs.button)"
                     :id="$id('dropdown-button')"
-                    style="display: none;"
                     class="dropdown w-48"
                     :class="direction"
                 >

resources/views/livewire/file-list.blade.php

@@ -24,18 +24,19 @@ class="relative"
     <div
         x-ref="panel"
         x-show="open"
-        x-transition.origin.top.right
+        x-transition:enter="transition ease-out duration-100"
+        x-transition:enter-start="opacity-0 scale-90"
+        x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-100"
+        x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-90"
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
-        style="min-width: 230px; display: none;"
+        style="min-width: 230px;"
         class="dropdown"
     >
         <div class="py-2">
             <div class="label">Settings</div>
-{{--            <button wire:click="toggleAutomaticRefresh">--}}
-{{--                <x-log-viewer::checkmark :checked="$refreshAutomatically" />--}}
-{{--                <span class="ml-3">Refresh every 2 seconds</span>--}}
-{{--            </button>--}}
 
             <button wire:click="toggleShorterStackTraces">
                 <x-log-viewer::checkmark :checked="$shorterStackTraces" />