Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Task details editor popover does not make efficient use of the available vertical space by default #5382

Open
nekohayo opened this issue Nov 26, 2023 · 0 comments

Comments

@nekohayo
Copy link
Contributor

On most 16:9 widescreen displays (tested at 1920x1080 and 1600x900, on Firefox + Epiphany + Chromium), the task editor does not make use of all the height available to it in the browser's viewport, wasting around 40% of the available height:

kanboard task editor UI layout - current - pix opti

While this is not a big deal for super short task descriptions, it becomes cumbersome when you are writing lots of notes and details into a task.

I believe there is a potential simple layout optimization that could work here and improve the situation both for desktop and mobile-ish formfactors (tablets?), whether in landscape or portrait orientation :

  • Relocate the multiline "Tags" form area into the sidebar's 1st column on the right; it's metadata, and that column has empty space available there anyway, let's use it!
  • Auto-expand the height of the general popover/overlay, to fill 90% of the viewport's height;
    it's not like we can actually read what's behind that 90% opaque black viewport shadow below the popover in any case!
  • Auto-expand the multiline "Description" textfield to fill the available height "minus the Save/Cancel buttons at the bottom" as the popover expands (or see the optional tweak further below)

Here is a rough mockup (made with GIMP) demonstrating the core suggestions above:

kanboard task editor UI layout - proposed opti

Those are the "least intrusive changes" low-hanging-fruit optimizations I can imagine, from a layout standpoint.


Optionally, if you want to go further, these additional tweaks could also help:

  • Move the "Save/Cancel" buttons area to the right, as part of the sidebar's columns,
    so that the description textfield can claim even more vertical space
  • If you wish to have more available width for the text field: consider having everything in a single column in the sidebar.
    However, I would understand if you prefer to retain two sidebar columns and to limit the width of the textfield for typographic line length reasons.
  • Optimize the heading area:
    Notice that the task's title is shown in a big h2 that includes "Kanboard instance name > Board/project name > Task title"... but the title part is repeated in the textentry field just below it!
    Maybe it would be worth either splitting the big h2 into two lines (with the instance name and board name on the 1st line being smaller than the task title on the 2nd line), or just showing the first two parts, or just showing the 3rd part?

I hope someone here finds this UX suggestion helpful to make that editing popover's more practical out-of-the-box :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

1 participant