Designing multiple 'screens' in responsive layout canvas app

[lfinman]

I have a Canvas App that I originally designed using 'Phone Layout', as that was the primary target platform.

We now wish to use it both on the web & phone.  It appears my best (only?) option is to create a new Canvas App using 'Tablet Layout', copy/paste from the old app into the new Tablet Layout, updating to a responsive layout so the new app will work on both phone & web/tablet.  I have reviewed https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout and https://powerapps.microsoft.com/en-us/blog/new-properties-for-responsive-canvas-apps/  and have done some preliminary tests.

I am left with a basic design question - hoping to get feedback before I go too far down the wrong path.

In the Phone Layout app, I have one screen displaying a gallery, when an item is selected, a second screen is opened to edit the data.  There are several support screens but I am focused on these two for now.

For the Tablet Layout/responsive design, the gallery will display on the left, the edit form will display on the right, filled in with data when the user selects an item in the gallery.  When this app is run on the phone, I will need it to display just the gallery (sized appropriately) and open another 'screen' when an item is selected.  

I can use containers to place the edit form and additional controls on the right side when viewed on a tablet/web.  But what is the easiest way to display this contained group on a separate 'screen' when viewed on a phone?  Do I:

1) put everything on one screen, and when in tablet mode display the edit container on the right.  In phone mode hide the edit container until something is selected, at which time I hide the gallery and display the edit container where the gallery used to be.  This mimics transitioning to another screen.

2) create a second 'edit' screen that is only used when running on the phone (or any narrow portrait mode).  Because this is a separate screen I cannot use the same contained controls that are displayed on the right in tablet mode (as I am doing in option 1), so I will have to duplicate the controls.  Maybe it is possible to point all/majority of the control configuration back at the edit container on the first screen?

Is there a standard way to do this? 

These are the two screens in the current phone app:

phone screen 1          phone screen 2

Thanks,

Lyn

[Pstork1 · Accepted solution]

I don't think using responsive design concepts you'll be able to use a single screen in the Tablet layout and 2 screens in the phone layout.  I've done a similar app using responsive design and the best solution I've been able to come up with is to have the 2 screens in the phone app extend down the screen with a scrollbar.  This is normally how its handled doing responsive design on a web page also.  So for the Tablet layout I show the containers side by side and the phone layout I set them to stack above and below each other. I think that is the best you can do short of having two different projects.

[lfinman]

Thanks @Pstork1 .  My imagination was handicapped by the fact that I started with a phone app, I guess.  It's starting to make sense.  I appreciate the response.