Content Manager Mobile and Tablet UI Improvements#

Overview#

Between October 2025 and February 2026, Strapi implemented a comprehensive responsive design initiative for the Content Manager, representing one of the most requested features in the community. Previously, the admin panel was not designed to be responsive, leading to usability issues on mobile and tablet devices.

These improvements are fully implemented in Strapi versions 5.27.0 and later, with the majority of updates in versions 5.30.x through 5.35.x.

What's Changed: Quick Reference#

At a Glance#

Breakpoint System#

Strapi uses three breakpoints for responsive behavior:

• Mobile (initial): < 768px
• Tablet (medium): 768px - 1023px
• Desktop (large): ≥ 1024px

Key Improvements Summary#

• ✅ Navigation: Responsive burger menu, focus trap, and ARIA attributes for accessibility
• ✅ Headers: Device-specific layouts with adaptive spacing and typography
• ✅ Forms: Touch-friendly inputs with iOS zoom prevention and scaled typography
• ✅ Content History: Mobile drawer pattern for better screen space utilization
• ✅ WYSIWYG Editor: Bottom toolbar placement and arrow-based block reordering on mobile
• ✅ Components: Arrow controls for reordering dynamic zones and repeatable components
• ✅ Accessibility: Full keyboard navigation and screen reader support

Key Changes by Component#

1. Headers#

Responsive Navigation Foundation#

PR #24455 - Established foundational responsive navigation system:

• Top navigation with burger menu for mobile/tablet devices, replacing the desktop sidebar
• Full-page side navigation on mobile for Content Manager and Settings sections
• Unified spacing and margins across all CMS pages using RESPONSIVE_DEFAULT_SPACING constants
• Device-specific guided tour visibility - automatically hiding tours on non-desktop devices using useIsDesktop hook

Header Layout Improvements#

PR #25203 - Major header layout improvements using useIsMobile hook:

• Mobile: Vertically stacked title, subtitle, and actions for optimal use of limited space
• Desktop: Traditional horizontal two-column layout maintained
• Responsive typography with adjusted font sizes and line heights via breakpoints
• Adaptive padding and spacing in ActionLayout and ContentLayout components

PR #24660 - Fixed double back links and header sizing:

• Implemented useDeviceType hook to conditionally render simplified headers on mobile devices
• Reduced header complexity and improved accessibility on mobile

PR #25104 - Enhanced top navigation consistency:

• Improved padding and sizing for mobile devices

2. List Views#

PR #25253 - Adjusted Content Manager subnav padding for mobile consistency

3. Edit Views#

Actions Drawer#

PR #25243 - Mobile-optimized actions drawer:

• New ActionsDrawer component with comprehensive tests
• Responsive header height constants: HEIGHT_TOP_NAVIGATION (6.4rem) and HEIGHT_TOP_NAVIGATION_MEDIUM (5.6rem)
• Side navigation width standardization using WIDTH_SIDE_NAVIGATION constant (23.2rem)
• Internationalized labels: "actions-drawer.open" and "actions-drawer.close" in English, Spanish, and French

Component and Dynamic Zone Reordering#

PR #25197 - Mobile-friendly reordering:

• Arrow controls (ArrowUp/ArrowDown IconButtons) conditionally rendered on non-desktop devices (!isDesktop)
• Move-up and move-down handlers with boundary validation
• Desktop retains drag-and-drop while mobile uses arrows
• Translation keys: "components.DynamicZone.move-up" and "components.DynamicZone.move-down"

WYSIWYG Editor Responsiveness#

PR #25191 - Blocks-based WYSIWYG editor improvements:

• Responsive toolbar with MenuTriggerWrapper component
• Adaptive form fields in link editing popovers (width: initial: '100%', medium: '368px')
• Mobile-optimized block interactions: Disabled drag-and-drop on mobile, replaced with arrow-based reordering
• Font size adjustments in BlocksContent.tsx (1.6rem with responsive scaling to 1.4rem on medium screens)

4. Content History#

PR #25338 - Enhanced content history forms for mobile:

• Used useIsMobile hook to conditionally apply compact styling (transparent backgrounds, no shadows/borders, reduced padding)
• Adjusted grid spacing from 6 units to 4 units on mobile for better space utilization

PR #25344 - Transformed content history sidebar:

• Converted to collapsible sticky drawer at the bottom of the page on mobile/tablet
• Frees up screen space making the form area more usable

5. Form Elements#

PR #25202 - Comprehensive form element adjustments:

• Typography adjustments: Reduced heading sizes (e.g., H1 from 4.2rem to 2.8rem on mobile, scaling to 3.6rem on medium screens)
• Form input optimization: Text fields, number inputs, date pickers, textareas, selects, and JSON inputs adjusted for mobile
• Button and IconButton improvements for touch-friendly interactions
• Accordion and Link component adjustments for better mobile usability
• Document actions menu enhancements with proper disabled state management using refs for reliable touch interactions

PR #24643 - Fixed iOS-specific input zoom issue:

• Detects iOS devices and enforces 16px font size on form inputs to prevent automatic zoom behavior

6. Navigation Accessibility#

PR #24765 - Improved left menu accessibility and mobile responsiveness:

• IconButton with ARIA attributes (aria-expanded, aria-controls) for burger menu toggle
• FocusTrap implementation to keep keyboard focus within the mobile menu when open
• Animated menu transitions using the motion library (framer-motion) with slide-in/slide-out effects
• Portal-based rendering for proper z-index stacking and modal behavior
• Semantic HTML with role="dialog" and aria-modal="true" for screen reader compatibility

7. Design System Updates#

PR #25174 - Upgraded design system to v2.1.2:

• Font size adjustments for better mobile readability in WYSIWYG editors and block content
• Responsive padding in relation fields and form components
• Updated design tokens ensuring consistency across mobile and desktop experiences

8. Additional Mobile Refinements#

• PR #24719 - Fixed NPS survey container width on mobile and tablet
• PR #24616 - Improved SubNav responsive widths (80dvw on mobile, 100% on medium screens)
• PR #24856 - Added scrollbar to media modal using ScrollArea component

Technical Implementation Patterns#

Device Detection Hooks#

Strapi uses two complementary approaches for device detection:

1. User Agent Detection - useDeviceType#

Implementation uses user agent strings to identify device types:

export function useDeviceType(): DeviceType {
  const [deviceType, setDeviceType] = React.useState<DeviceType>('desktop');

  React.useEffect(() => {
    const userAgent = navigator.userAgent.toLowerCase();

    if (/mobile|iphone|ipod|android.*mobile|windows phone/.test(userAgent)) {
      setDeviceType('mobile');
    } else if (/ipad|tablet|android(?!.*mobile)/.test(userAgent)) {
      setDeviceType('tablet');
    } else {
      setDeviceType('desktop');
    }
  }, []);

  return deviceType;
}

2. Viewport-Based Detection - useIsMobile, useIsDesktop, useIsTablet#

Implementation uses CSS media queries via window.matchMedia API:

• useIsDesktop(): Returns true when viewport ≥1024px
• useIsMobile(): Returns true when viewport <768px
• useIsTablet(): Returns true when viewport is between 768px-1023px

These hooks automatically update when viewport size changes using event listeners.

Breakpoint Definitions#

Based on test fixtures:

• medium: @media (min-width: 768px) - tablet and above
• large: @media (min-width: 1024px) - desktop

Theme Constants#

All responsive theme constants are defined in packages/core/admin/admin/src/constants/theme.ts:

const RESPONSIVE_DEFAULT_SPACING = {
  initial: 4,
  medium: 6,
  large: 10,
};

const HEIGHT_TOP_NAVIGATION = '6.4rem';
const HEIGHT_TOP_NAVIGATION_MEDIUM = '5.6rem';
const WIDTH_SIDE_NAVIGATION = '23.2rem';

Responsive Design Approach#

1. Breakpoint-based Styling with Responsive Prop Objects#

Components use responsive prop objects with breakpoint keys (initial, medium, large):

Example from EditView Header:

<Flex
  paddingLeft={RESPONSIVE_DEFAULT_SPACING}
  paddingRight={RESPONSIVE_DEFAULT_SPACING}
  paddingTop={{
    initial: 4,
    medium: 6,
  }}
  gap={{
    initial: 2,
    medium: '8rem',
  }}
  direction={{
    initial: 'column-reverse',
    medium: 'row',
  }}

Example from Panel Component:

<Flex
  background={{ initial: 'transparent', large: 'neutral0' }}
  borderColor={{ initial: 'transparent', large: 'neutral150' }}
  padding={{ initial: 0, large: 4 }}
  shadow={{ initial: 'none', large: 'tableShadow' }}
  gap={{ initial: 4, large: 3 }}
/>

2. Conditional Rendering Based on Device Type#

Example from EditView:

{!isDesktop && (
  <>
    <ActionsDrawer.Root hasContent={drawerHasContent} hasSideNav>
      <ActionsDrawer.Overlay />
      <ActionsDrawer.Header>
        <ActionsPanelContent />
      </ActionsDrawer.Header>
      <ActionsDrawer.Content>
        <Panels withActions={false} />
      </ActionsDrawer.Content>
    </ActionsDrawer.Root>
    <Box height="6.5rem" /> {/* Spacer to prevent content overlap */}
  </>
)}

3. ActionsDrawer Implementation#

The ActionsDrawer component is a mobile-only sticky expandable banner:

• Fixed position at the bottom with z-index management
• Expands upward to reveal actions when toggled
• Adjusts left position when side navigation is present: left: ${({ $hasSideNav }) => ($hasSideNav ? WIDTH_SIDE_NAVIGATION : 0)}
• Features overlay to dim background content when opened
• Maximum height of calc(100vh - 25rem) when expanded

4. Content History Drawer Implementation#

The VersionsList component conditionally renders different layouts:

Desktop: Fixed sidebar at width: { initial: '28rem', large: '32rem' }

Mobile: Uses ActionsDrawer component with drawer pattern:

return !isMobile ? (
  <Flex /* sidebar layout */ />
) : (
  <>
    <ActionsDrawer.Root hasContent hasSideNav>
      <ActionsDrawer.Overlay />
      <ActionsDrawer.Header>
        {/* Shows current version info */}
      </ActionsDrawer.Header>
      <ActionsDrawer.Content>
        <VersionsListItems />
      </ActionsDrawer.Content>
    </ActionsDrawer.Root>
    <Box width="100%" height="5.7rem" /> {/* Bottom spacer */}
  </>
);

Mobile-First Features#

• Touch-friendly targets: Increased button sizes and spacing for easier tapping
• Simplified layouts: Reduced visual complexity on small screens
• Contextual controls: Arrow-based reordering replaces drag-and-drop on mobile
• Bottom drawers: Content history and actions moved to bottom drawers for thumb accessibility
• Font size optimizations: Larger base sizes on mobile, scaling down on larger screens

UI Behavior on Different Screen Sizes#

This section describes how the Content Manager UI adapts across different device sizes. Understanding these behaviors helps ensure content management workflows remain efficient regardless of device.

Mobile (< 768px)#

Navigation

• The desktop sidebar is replaced by a hamburger menu icon in the top-left corner
• Tapping the hamburger icon opens a full-page drawer that slides in from the left
• The drawer includes all navigation links with full keyboard focus management
• Tapping outside the drawer or pressing ESC closes it

Headers

• Page titles, subtitles, and action buttons stack vertically to maximize horizontal space
• The back button appears at the top without duplication
• Font sizes reduce to 2.8rem for H1 headings
• Padding compresses to provide more content area

List Views

• The SubNav component narrows to 80% of viewport width (80dvw)
• Table layouts may scroll horizontally or adapt to single-column card views
• Pagination controls remain accessible at the bottom

Edit Views

• A sticky drawer appears at the bottom of the screen containing actions and metadata
• The drawer shows a collapsed preview by default with a chevron icon to expand
• When expanded, the drawer reveals publish/unpublish buttons, draft status, and related content options
• An overlay dims the main content when the drawer is open
• The main form area occupies the full width above the drawer

Component Reordering

• Drag-and-drop is disabled on mobile devices
• Arrow up/down buttons appear next to each component in repeatable fields and dynamic zones
• Users tap arrows to move components up or down in the list
• Boundary validation prevents moving beyond the first or last position

Content History

• The history sidebar transforms into a bottom drawer similar to the actions drawer
• The drawer header shows the currently selected version information
• Tapping the drawer expands it to reveal the full version list
• The main content area displays the version comparison or selected version details

Form Elements

• All form inputs stack in a single column
• Input fields use a minimum 16px font size on iOS to prevent automatic zooming
• Buttons and icon buttons have increased touch targets (minimum 44x44px)
• Date pickers, selects, and accordions adapt to mobile-friendly overlays

WYSIWYG Editor

• The toolbar moves from the top to the bottom of the editor
• Formatting options that don't fit appear in an overflow "More" menu
• Block reordering uses arrow buttons instead of drag-and-drop
• The expand mode is disabled; editor remains inline
• Link editing popovers stretch to full width

Tablet/Medium Screens (768px - 1023px)#

Navigation

• A top navigation bar appears with consistent padding and spacing
• The hamburger menu may still be present depending on content density
• Navigation items have adequate spacing for touch targets

Headers

• Headers begin transitioning from vertical stacks to horizontal layouts
• Title and subtitle may share a row with actions flowing below
• Font sizes increase to 3.6rem for H1 headings
• Padding expands to medium breakpoint values (6 spacing units)

List Views

• SubNav expands to 100% of available width
• Table layouts have more room to display columns side-by-side
• Filters may appear in a condensed format or secondary row

Edit Views

• The actions drawer remains at the bottom but with increased width
• More actions can fit in the drawer header before overflowing
• Form panels may begin showing borders and shadows as they transition toward desktop styling

Form Elements

• Some form inputs expand to fixed widths (e.g., 368px for link popovers)
• Multi-column layouts may begin appearing for shorter form fields
• Typography continues scaling up across all form elements

WYSIWYG Editor

• Toolbar remains at the bottom but with more visible controls
• Link popover widths become fixed at 368px instead of full width
• More formatting options visible before overflow menu

Desktop (≥ 1024px)#

Navigation

• A persistent sidebar appears on the left side at 23.2rem (232px) width
• The sidebar remains visible during scrolling
• All navigation sections are immediately accessible without drilling down

Headers

• Full horizontal two-column layout with title/subtitle on the left and actions on the right
• Maximum font sizes applied (4.2rem for H1 headings)
• Generous padding and spacing between elements
• All action buttons visible without overflow menus

List Views

• Full-width layout with all filters, search, and bulk actions visible
• Tables display all columns without horizontal scrolling
• Advanced filtering options available in dedicated areas

Edit Views

• Actions and metadata appear in a fixed sidebar on the right (not a drawer)
• The sidebar is always visible and doesn't require interaction to view
• Main content area occupies the center with comfortable margins
• Multi-column form layouts where appropriate

Component Reordering

• Full drag-and-drop functionality enabled
• Visual drag handles appear on hover
• Drop zones highlight when dragging components
• Smooth animations during reordering

Content History

• History appears as a fixed sidebar (28-32rem width) on the right
• The sidebar scrolls independently from the main content
• Version list always visible for quick comparison
• Click any version to load it in the main content area

Form Elements

• Multi-column layouts optimize space usage
• Larger input fields with comfortable padding
• All dropdown options visible without truncation
• Complex form fields (JSON editor, rich text) have maximum working area

WYSIWYG Editor

• Toolbar positioned at the top of the editor
• All formatting controls visible in the main toolbar
• Drag-and-drop for block reordering with visual feedback
• Expand mode available to maximize editing space
• Link popovers and modals have optimal sizing

Testing Responsiveness#

Manual Testing Approach#

While the official Strapi documentation does not include specific testing guidelines for responsive design, you can test the Content Manager's mobile and tablet responsiveness using standard browser developer tools:

Using Browser Developer Tools#

Chrome DevTools:

1. Open Chrome DevTools (F12 or Cmd/Ctrl + Shift + I)
2. Click the "Toggle device toolbar" icon (Cmd/Ctrl + Shift + M)
3. Select from preset device profiles (iPhone, iPad, etc.) or enter custom dimensions
4. Test at the key breakpoints:
   • Mobile: < 768px (e.g., 375px, 414px)
   • Tablet: 768px - 1023px (e.g., 768px, 834px, 1024px)
   • Desktop: ≥ 1024px (e.g., 1280px, 1920px)

Firefox Developer Tools:

1. Open Developer Tools (F12 or Cmd/Ctrl + Shift + I)
2. Click the "Responsive Design Mode" icon (Cmd/Ctrl + Shift + M)
3. Select device presets or enter custom viewport sizes
4. Test touch simulation for mobile interactions

Key Breakpoints to Test#

Based on the theme breakpoint definitions:

Testing Checklist#

Navigation#

• Burger menu appears and functions on mobile (< 768px)
• Side navigation opens/closes properly with focus trap
• Top navigation displays correctly on tablet (768px - 1023px)
• Sidebar navigation visible on desktop (≥ 1024px)

Headers#

• Headers stack vertically on mobile
• Title, subtitle, and actions display properly at all sizes
• Back button appears correctly without duplication
• Padding and spacing adjust appropriately per breakpoint

List Views#

• SubNav adjusts width (80dvw on mobile, 100% on medium+)
• Content is accessible and readable at all sizes
• Pagination controls remain usable on mobile

Edit Views#

• Actions drawer appears at bottom on mobile/tablet (< 1024px)
• Component/dynamic zone reordering uses arrows on mobile
• Drag-and-drop works on desktop
• Form panels adjust background, shadows, and padding per breakpoint

Content History#

• History appears as bottom drawer on mobile
• Drawer opens/closes properly with overlay
• Version comparison displays correctly on mobile
• Sidebar visible on desktop

Form Elements#

• Typography scales appropriately (H1: 2.8rem → 3.6rem → 4.2rem)
• Input fields don't trigger zoom on iOS (16px minimum font size)
• Buttons and IconButtons are touch-friendly on mobile
• Accordions, selects, and date pickers work at all sizes
• WYSIWYG editor toolbar repositions to bottom on mobile

WYSIWYG/Block Editor#

• Toolbar appears at bottom on mobile
• Link popover adjusts width (100% mobile, 368px medium+)
• Block reordering uses arrows on mobile
• Preview toggle positioned correctly on mobile
• Expand mode disabled on mobile

Device Testing#

For comprehensive testing, test on actual devices when possible:

Mobile Devices:

• iPhone (Safari, Chrome)
• Android phones (Chrome, Samsung Internet)

Tablet Devices:

• iPad (Safari, Chrome)
• Android tablets (Chrome)

Desktop Browsers:

• Chrome, Firefox, Safari, Edge at various window sizes

Common Issues to Watch For#

Based on historical issues, verify:

• No overlapping UI elements on small screens
• Sidebars don't collapse the editor pane to unusable widths
• Forms don't exceed viewport width
• Content remains accessible without horizontal scrolling
• Touch targets are at least 44x44px (iOS HIG recommendation)
• Modals and drawers don't obscure critical content

Testing with Real Content#

Test with realistic content scenarios:

• Long content titles and descriptions
• Multiple components and dynamic zones
• Large numbers of form fields
• Extensive content history versions
• Rich text with various formatting

This ensures the responsive design handles edge cases gracefully across all device sizes.

Coverage#

This responsive design initiative is comprehensive, covering:

• ✅ Navigation (top nav, burger menu, side nav)
• ✅ Content Manager headers and layouts
• ✅ Form elements and inputs
• ✅ WYSIWYG/Blocks editor
• ✅ Component and dynamic zone management
• ✅ Content history
• ✅ Actions and toolbars
• ✅ Modals and drawers
• ✅ Media library
• ✅ Authentication pages