strapi-plugin-responsive-admin

A plugin that makes the Strapi 5 admin panel fully responsive and usable on mobile and tablet devices.

The existing strapi-5-plugin-responsive-backend plugin no longer works with current Strapi 5 versions because it relies on data-strapi-header attributes that no longer exist in the DOM. This plugin uses a different approach — it uses a MutationObserver to mark key elements with stable CSS classes, then applies responsive styles based on those classes.

How it works

Instead of relying on dynamic styled-components class names or removed data attributes, this plugin:

1. Observes the DOM via MutationObserver
2. Marks key layout elements with stable classes:
   • strapi-icons-nav — the icon sidebar
   • strapi-content-nav — the "Content" navigation panel
   • strapi-layout-wrapper — the flex wrapper containing content nav + main content
3. Applies CSS media queries targeting these stable classes

Features

• Horizontal icon navbar at the top on mobile
• Content nav stays as a narrow sidebar next to the content area
• Tables get horizontal scroll
• Modals resize to 95% width
• Inputs stretch to full width in edit views
• Works at max-width: 900px

Installation

npm install strapi-plugin-responsive-admin

Then add to config/plugins.ts:

export default () => ({
  'responsive-admin': {
    enabled: true,
  },
});

Rebuild the admin panel:

npm run build

Compatibility

• Strapi 5.x
• Tested on Strapi 5.24.1

Author

dawid.winiarz

License

MIT