Enhance the Tabs to be responsive in Clinical Dashboard

Description

The tabs should not wrap to the following line and have an arrow on the right and left when needed so that the user can click on then to slide and see the remaining tabs.

Current Behaviour

Expected Behaviour

 

Link to Design:

 

Suggested Breakpoints/Devices

360*740 [Samsung Galaxy] **

414*896 [iPhone Pro]

540*720 [Surface Duo]

912*1368 [Surface Pro]

768*1024 [iPad Mini] **

1024*1366 [iPad Pro] **

Mac Book Air

Mac Book Pro

Device Testing

One Android device each [Mobile and Tab]

One iOS device each [Mobile and Tab]

Attachments

2

Activity

Krishna Kiran December 2, 2022 at 5:15 AM

PR:

Priyanshu Singh November 16, 2022 at 8:22 AM

Tested in Android device.Functionality is working as expected.Moving it to done

Priyanshu Singh November 14, 2022 at 12:46 PM
Edited

Device tested

  1. 360*740 [Samsung Galaxy] **

  2. 414*896 [iPhone Pro]

  3. 540*720 [Surface Duo]

  4. 912*1368 [Surface Pro]

  5. 768*1024 [iPad Mini] **

  6. 1024*1366 [iPad Pro] **

  7. Mac Book Air

  8. Mac Book Pro

  9. Android device(Mobile)

Non tested device

  1. Android device [Tab]

  2. iOS device [Mobile and Tab]

  3. Ipad pro

Fixed
Pinned fields
Click on the next to a field label to start pinning.

Details

Assignee

Reporter

Labels

Fix versions

Priority

Created November 7, 2022 at 11:06 AM
Updated January 12, 2023 at 11:30 AM
Resolved November 16, 2022 at 8:22 AM