Responsive Mobile Layout

[SammCheese]

The first draft for a Responsive Mobile Layout for InvokeAI. Some basic documentation to help contributors. // Notes from: @blessedcoolant

---

The whole rework needs to be done using the mobile first concept where the base design will be catered to mobile and we add responsive changes as we grow to larger screens.

Added

• Basic breakpoints have been added to the theme.ts file that indicate at which values Chakra makes the responsive changes.
• A basic useResolution hook has been added that either returns mobile, tablet or desktop based on the breakpoint. We can customize this hook further to do more complex checks for us if need be.

Syntax

• Any Chakra component is directly capable of taking different values for the different breakpoints set in our theme.ts file. These can be passed in a few ways with the most descriptive being an object. For example:

flexDir={{ base: 'column', xl: 'row' }} - This would set the 0em and above to be column for the flex direction but change to row automatically when we hit xl and above resolutions which in our case is 80em or 1280px. This same format is applicable for any element in Chakra.

flexDir={['column', null, null, 'row', null]} - The above syntax can also be passed as an array to the property with each value in the array corresponding to each breakpoint we have. Setting null just bypasses it. This is a good short hand but I think we stick to the above syntax for readability.

Note: I've modified a few elements here and there to give an idea on how the responsive syntax works for reference.

---

Problems to be solved @SammCheese

• Some issues you might run into are with the Resizable components. We've decided we will get not use resizable components for smaller resolutions. Doesn't make sense. So you'll need to make conditional renderings around these.
• Some components that need custom layouts for different screens might be better if ported over to Grid and use gridTemplateAreas to swap out the design layout. I've demonstrated an example of this in a commit I've made. I'll let you be the judge of where we might need this.
• The header will probably need to be converted to a burger menu of some sort with the model changing being handled correctly UX wise. We'll discuss this on discord.

---

Anyone willing to contribute to this PR can feel free to join the discussion on discord.
https://discord.com/channels/1020123559063990373/1020839344170348605/threads/1097323866780606615

[blessedcoolant]

I would not approach it this way. ChakraUI has responsive built in and we should be using that.

You can set breakpoints in theme.ts like this to any that suit us.

  breakpoints: {
    sm: '30em', // 480px
    md: '48em', // 768px
    lg: '62em', // 992px
    xl: '80em', // 1280px
    '2xl': '96em', // 1536px
  },

Then you are free to use breakpoint specific styling across any component in the app.

For example, doing ...

<Flex gap={4} flexDir={['column', 'column', 'row', 'row', 'row']}>

... would assign column flex direction for mobiles and go to row for larger screens. This can be done for any parameter. Each value in the array maps to the breakpoints we have. It'll be quite a bit of work to get a completely responsive layout because we'll need to make a ton of parameter updates but this would be the easier way to do it.

Once you setup the breakpoints, I'd focus setting size specific values to components that set max height at the moment and go from there. That way you get components rolling down as they shouid.

I gave this setup a quick test and it works as expected. Jus that it is quite a bit of work to make sure everything works properly.

I reckon @psychedelicious would agree but I'd like to know his thoughts on this too.

[blessedcoolant]

I can make a rough draft PR for you if you want. You can build on that.

[SammCheese]

Sure thing!

[blessedcoolant]

opera_fzLOsxUQKO.mp4

I did a quick test to see if it works at all. It does. And it was super super easy to setup. You'll run into trouble when dealing with resizable but we'll work that out when you get to it.

[SammCheese]

What about the gallery?

[blessedcoolant]

What about the gallery?

I was just testing it. So I didn't add it up. It can go anywhere really. That's a design decision. Not a technical one. Was just testing the technical aspect of things right now.

I'll look a little bit more into Chakra's responsive styling and see if there's anything else that needs prior setup. Feel free to read it up too. It's really simple and will save you a ton of hassle trying to get media queries right. If in a day or two you still think you aren't comfortable with it, I'll make a draft PR. Or else I'll let you build it and then coordinate with you on seeing it through. Either works.

[SammCheese]

I can make a rough draft PR for you if you want. You can build on that.

I'd like the draft PR haha, i cant wrap my head around this :D

[blessedcoolant]

I'd like the draft PR haha, i cant wrap my head around this :D

Done. I updated this PR instead of making a new one. I also added documentation in the main post for your reference and anyone else. I also created a new thread on Discord for this so we can keep all Responsive Layout discussions there.

Hit me up with any queries you might have. Thanks again for taking this up.

[psychedelicious]

looks great!

[blessedcoolant]

Hey, we just pushed an update to the UI. Can you sync up again? We'll merge it in after. If you're up for it, please keep track of all changes we make to the UI so if anything breaks responsive, let us know.