Mode:

Left Panel - Responsive Test

Current size:

Testing Responsive Behavior

Resize your browser window to test:

  • Desktop (>768px): Horizontal split with draggable handle
  • Mobile (≤768px): Vertical stack with scrolling
  • Transition is automatic based on viewport width
  • Each panel scrolls independently in both modes

Long Content for Scroll Testing

Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 11: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 13: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 14: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Paragraph 15: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilitis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac.

Mobile Scroll Behavior

On mobile devices, panels stack vertically and each maintains its own scroll position. The content should be easily readable and navigation should remain accessible at the top of the screen.

Scroll continues below...

Additional content block 1

Additional content block 2

Additional content block 3

Additional content block 4

Additional content block 5

Additional content block 6

Additional content block 7

Additional content block 8

Additional content block 9

Additional content block 10

Direction: | Panel 2 Size:

Right Panel - Different Content

Current size:

Mobile-First Design

This demo implements mobile-first responsive design. The split panels automatically adapt to the viewport size, providing an optimal experience on both desktop and mobile devices.

Key Features:

  • Automatic layout switching at 768px breakpoint
  • Touch-friendly handles on mobile
  • Preserved scroll positions
  • Full viewport utilization
  • Smooth transitions between modes

Content Adaptation

Content reflows naturally as the layout changes. On mobile, panels stack vertically to maximize readability. On desktop, side-by-side layout allows for comparison and multitasking.

Right panel content 1. This panel has less content to demonstrate different scroll lengths.

Right panel content 2. This panel has less content to demonstrate different scroll lengths.

Right panel content 3. This panel has less content to demonstrate different scroll lengths.

Right panel content 4. This panel has less content to demonstrate different scroll lengths.

Right panel content 5. This panel has less content to demonstrate different scroll lengths.

Right panel content 6. This panel has less content to demonstrate different scroll lengths.

Right panel content 7. This panel has less content to demonstrate different scroll lengths.

Testing Instructions

1. Resize browser window to cross the 768px threshold

2. Check that layout switches between horizontal and vertical

3. Verify scroll positions are maintained

4. Test dragging handles in both modes

5. Confirm touch/mouse interactions work correctly