[Feature Request] Improve Responsiveness and Optimize UI for Tablets and Mobile Devices: Introduce responsive designs for tablets and mobile devices (part 1).

[sedghi]

What feature or change would you like to see made?

• Design and implement a new UI layout optimized for iPad/tablet devices, featuring a single resizable panel
• Ensure the overall viewer experience is responsive and adapts seamlessly to different screen sizes

Why should we prioritize this feature?

As more users access the viewer application from tablets and mobile devices, it is essential to provide an optimized user experience tailored to these form factors.

[james-hanks]

@dan-rukas to add responsive design to this ticket

[sedghi]

@dan-rukas interesting comment here #3836 (comment)

http://oviyam.raster.in/ioviyam2.html
Its a bit old with small screen consideration but have a great concept to begin building new mobile UI.

[sedghi]

We will target Progressive Web Apps for the implementation of the viewer on iOS and Android. I think it would be good enough. There are other approaches

• Cordova or CapacitorJS, where they take a js app and try to compile it to "native". No one seems to use Cordova anymore, and a lot of people see promise in CapacitorJS but still i don't think it is mature enough and strategic for us to target native right now

• The better alternative for us which is not yet mature either (but has a strong feature imo) is React DOM for React Native using React Strict DOM, seems like Meta is using it already for some of their production apps, but still is declared as experimental. I think when it becomes a stable release, we can have a release to move our React DOM to React DOM for React Native so that we only maintain one code base and can publish to Web and Native at the same time

[jagandecapri]

Hi @sedghi , we are exploring to integrate OHIF Viewer in our Expo React Native app as a web-view. Just checking if there is progress on this issue and any release plan. Thank you!

[sedghi]

We have begun work on this extensive feature and are actively developing it. Check out the new components at https://docs.ohif.org/components. We are upgrading these components to enhance their responsiveness.