Skip to content

Dynamic column width #3331

Open
Open
@timkrief

Description

@timkrief

How to use GitHub

  • Please use the 👍 reaction to show that you are affected by the same issue.
  • Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
  • Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
I keep having to change the window's size or zoom scale, or I keep having to scroll horizontally, to be able to fit or view all stacks on the screen, sometimes I even forget about one stack that is overflowing. Plus, board with a small number of stacks feel like they could use more of the available space.

Describe the solution you'd like
The idea would be to let the columns stretch to fill the screen.
We could define a minimum and maximum width for a stack, close to the width value we use right now, and then let the stacks stretch to fill the page as long as they are not bigger or smaller than those limits.

This has some unexpected design bonuses.

  • If there are not enough stacks to fill the screen, at least they will have the max value, reducing the amount of unused space.
  • If there are not enough space to fit the stacks, at least they will have the min value, increasing the amount of information displayed.
  • Sometimes, when the left or right sidebar appears, most, or even all, stacks stay visible, they just shrink a bit instead of being covered. (see the gif)

Describe alternatives you've considered
Being able to change column width for each board manually, but this seems a bit clunky and unreliable.

Additional context
I made that work using some custom CSS and it really feels nicer to use and more professional. The values of min and max could be discussed, but using values close to what we've been using for the default width ensures that this will not massively change the look and feel of the app.

Peek 2021-09-21 05-04

This is the CSS I used. It could be cleaner if this was done natively instead of as a custom style on top of the existing one.

.smooth-dnd-container.horizontal>*,
.dashboard-column{
    flex: 1 !important;
    width: 0 !important;
    min-width: 210px !important;
    max-width: 300px !important;
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions