invoke-ai/InvokeAI

[enhancement]: Improve Workflow Library layout for Widescreen displays

Open

#5419 opened on Jan 5, 2024

View on GitHub
 (6 comments) (0 reactions) (0 assignees)TypeScript (20,358 stars) (2,164 forks)batch import
enhancementgood first issueui/ux overhaul

Description

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.

image

image

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 image

HR version image

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
ReactCSSTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Explore the Workflow Library component in the frontend codebase. The issue lists multiple enhancement ideas (e.g., moving buttons, horizontal rules, alternating colors, dynamic item count). Start by reading the relevant component files (likely in src/features/workflows or similar). Determine which approach is preferred by maintainers from the issue comments. Then implement the chosen layout change, ensuring responsiveness for widescreen displays. Test with different screen widths.