@copilot please check app/views/**/*.erb to see if we need changes in the erb templates as well

I checked all ERB templates in app/views/. Only two files use Flowbite data attributes:

• _site_header.html.erb: uses data-drawer-target, data-drawer-show, data-dropdown-toggle, data-dropdown-offset-distance, data-dropdown-placement
• resource/_batch_actions_dropdown.html.erb: uses data-dropdown-toggle, data-dropdown-offset-distance, data-dropdown-placement

I verified these attributes exist in Flowbite v4's source with identical occurrence counts as v3 — the data attribute API is fully backward compatible. No ERB template changes are needed.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.08%. Comparing base (48eda3e) to head (1b9894a).

@@           Coverage Diff           @@
##           master    #8938   +/-   ##
=======================================
  Coverage   99.08%   99.08%           
=======================================
  Files         139      139           
  Lines        4045     4045           
=======================================
  Hits         4008     4008           
  Misses         37       37           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

There is a problem with on v4 where it has no modal backdrop for both the hamburger menu navigation for mobile which I think Flowbite calls the Drawer component and then a plain modal for the batch action form which is available on the user nested posts index resource.

Will take a second look here

Root Cause

In Flowbite v3 (3.1.2), the modal and drawer backdrop classes used hardcoded Tailwind CSS color utilities:

backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',

In Flowbite v4 (4.0.1), these were changed to use a CSS custom property (theme variable):

backdropClasses: 'bg-dark-backdrop/70 fixed inset-0 z-40',

The same change was made in the Drawer component:

backdropClasses: 'bg-dark-backdrop/70 fixed inset-0 z-30',

Why bg-dark-backdrop/70 doesn't work in ActiveAdmin

The class bg-dark-backdrop/70 relies on the CSS variable --color-dark-backdrop being defined in a Flowbite v4 theme file. For example, in the default theme:

    --color-dark-backdrop: var(--color-gray-950);

ActiveAdmin does not import any Flowbite theme CSS file. It only uses the vendored JS (vendor/javascript/flowbite.js) and the Tailwind CSS plugin (plugin.js). Without the theme CSS, --color-dark-backdrop is undefined, so bg-dark-backdrop/70 resolves to a transparent/invisible background — meaning no visible backdrop appears when modals or drawers are opened.

The Fix

ActiveAdmin needs to define the --color-dark-backdrop CSS variable so that Tailwind CSS can resolve bg-dark-backdrop/70. The minimal fix is to add it to the @theme block in the generated CSS, or directly in the Tailwind plugin.

The simplest approach would be to add the variable definition in the ActiveAdmin Tailwind plugin (plugin.js) or instruct users to add it in their active_admin.css:

@import "tailwindcss";

@config "../../../tailwind-active_admin.config.js";

@theme {
  --color-dark-backdrop: var(--color-gray-950);
}

This maps dark-backdrop to gray-950, which is the Flowbite v4 default theme value, and restores the same visual behavior as the old bg-gray-900/50 (a near-black semi-transparent overlay).

Summary

The PR #8938 correctly vendored the new JS, but missed that v4 now depends on CSS theme variables that weren't previously needed. The --color-dark-backdrop variable (and potentially other theme variables) must be provided by ActiveAdmin for the backdrop to render.

Ref:

• themesberg/flowbite@6d99f44
• https://github.com/themesberg/flowbite/blame/d9cdc1d134e214c4ed5646789d7de663a126f0a6/src/components/modal/index.ts

@javierjulio it is because of default themes

they have introduced themes, and now backdropClasses is 'bg-dark-backdrop/70 fixed inset-0 z-40', where bg-dark-backdrop is a css variable.

The default theme, also "forces"

    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

ad advising to

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

Which is really surprising and a no-go for me, since this would introduce by default a call to external cdns and slow down the admin area

I will revert to draft and find another solution