Flowbite Drawer incorrectly applies left: 0 and translateX(-100%) in Rails 7 (Turbo) environment

[nizam12khan]

Title: Flowbite Drawer incorrectly slides from left in Rails 7 (Turbo) app, adds conflicting styles left: 0 and translateX(-100%)

Describe the bug
When using the Flowbite Drawer component in a Ruby on Rails 7 application (which uses Turbo by default), the drawer component incorrectly slides in from the left, even when the HTML is explicitly configured for a right-side drawer as per the documentation.

This happens in the mobile view when using the standard data-drawer-toggle button.

Inspecting the element in the developer tools reveals the bug: Flowbite's JavaScript is programmatically adding left: 0 to the drawer's class list and an inline style="transform: translateX(-100%);". These injected styles directly conflict with the right-0 and translate-x-full classes in the source HTML, causing the drawer to appear from the left.

To Reproduce
Steps to reproduce the behavior:

1. Set up a standard Rails 7 application with turbo-rails and flowbite (e.g., via the flowbite-rails gem or NPM/Vite).
2. In the main layout, render a header partial.
3. In the header partial, add the HTML for a mobile-only toggle button and a drawer, using the "HTML-first" classes for right-side placement (as per the Flowbite docs).

   <button id="mobile-menu-btn" ... type="button" data-drawer-target="mobile-menu-drawer" data-drawer-toggle="mobile-menu-drawer">
     </button>
   
   <div id="mobile-menu-drawer" class="fixed top-0 right-0 z-50 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-blue-900 w-80">
     <button type="button" data-drawer-hide="mobile-menu-drawer" aria-controls="mobile-menu-drawer">
       </button>
     </div>

4. Start the Rails server (bin/dev).
5. Load the page and shrink the browser viewport to the mobile breakpoint to show the toggle button.
6. Click on the toggle button.
7. See error: The drawer (#mobile-menu-drawer) slides in from the left.
8. See error (in Dev Tools): Inspecting the drawer div shows the conflicting styles have been added by Flowbite's JS: class="... right-0 ... translate-x-full ... left-0" and style="transform: translateX(-100%);".

Expected behavior
The drawer, which is correctly configured in the HTML with right-0 and translate-x-full, should be hidden off-screen to the right. When the toggle button is clicked, it should slide into view from the right.

Screenshots
(If applicable, add screenshots to help explain your problem. You can drag and drop your images directly into the GitHub issue.)

Desktop (please complete the following information):
 - OS: macOS
 - Browser: Chrome
 - Version: Latest

Smartphone (please complete the following information):
 - Device: iPhone 14 Pro, iPad Pro (simulators and real devices)
 - OS: iOS 16+
 - Browser: Safari, Chrome
 - Version: Latest

Additional context
This is a JavaScript initialization race condition caused by Rails Turbo. Flowbite's initDrawers() script is applying its default (left-side) styles before it has correctly parsed the element's right-0 / translate-x-full classes, likely due to the turbo:load event.

We have followed the official documentation for an HTML-first, right-side drawer setup. Standard workarounds, such as adding a turbo:load event listener in application.js to manually re-run initDrawers(), did not solve the issue. This suggests a deeper conflict between Flowbite's initialization logic and the Turbo-Rails environment.