[enhancement]: Improve Workflow Library layout for Widescreen displays

[skunkworxdark]

Is there an existing issue for this?

• I have searched the existing issues

Contact Details

skunkworxdark

What should this feature add?

• On a widescreen monitor, it is frustrating to quickly see which buttons relate to which workflow. It would be preferable to have either:

  • The buttons on the left of the workflow name
  • or some kind of horizontal rule lines dividing each workflow
  • or alternating background colours on the list
  • or even double-click to load the workflow.

• On my display, the list of workflows does not go to the bottom of the available window space resulting in more pages if you have many workflows. Either:

  • Dynamically make the number of elements fit the page
  • or have a way for the user to select the number of items per page.
  • or a scrolling list of all workflows rather than a paged list. It is mildly annoying to have to look through the pages one at a time.

Alternatives

No response

Additional Content

I think I prefer the moved buttons. But I am sure someone with better design skills then me could come up with something that works well.

Moved buttons

HR version

[skunkworxdark]

btw the screenshots were created by modifying \invokeai\frontend\web\src\features\workflowLibrary\components\WorkflowLibraryListItem.tsx

[hipsterusername]

This could also just have a max width

[skunkworxdark]

and or a max height so that the list always fills the workflow library modal !!! Although that would probably be the least impacting change it is not the best use of screen real estate. Also, I would still think there could be a disconnect between the workflow name and the buttons unless the max width is quite small

[joshistoast]

Can I also suggest the modal not being so unnecessarily wide?

[hipsterusername]

I addressed the width. I think this solves many problems without as much of the heavy lifting.

[skunkworxdark]

Setting a maximum width should improve the disconnect between the workflow name and the buttons. However, does not do anything about the list height and number of pages short cummings.