trackslash
TRACK-70 P3

Audit and fix misaligned controls and form fields across the web UI

0
All issues

Description

Problem

On several pages, buttons and form fields don't line up with the content they belong to or with each other. The two known cases are tracked as sub-issues: the project About page's Change image button, and the New issue form. The rest of the UI probably has the same kind of problem.

Acceptance criteria

  • Audit every page for misaligned buttons, form fields, labels and page-level actions. This includes project About and settings, issue create and detail, sprints, members, tokens and user settings.
  • Fix each problem found, or record it as a sub-issue here.
  • Forms use one consistent layout: labels and inputs left-aligned in a single column (or one consistent grid) with even vertical spacing, and a tab order that matches the visual order.
  • Page- and section-level actions (e.g. "Change image", "Edit") sit in a consistent position, on the trailing edge of their section.
  • Check at the supported responsive breakpoints and in light and dark modes.

Sub-issues

2
TRACK-72 P3 Right-align the Change image button on the project About page Done TRACK-73 P3 Left-align and restack the fields on the New issue form Done

Linked issues

0

GitHub

0

No branches or pull requests linked.

Comments

1
Bradley

Alignment audit finished. I checked the pages at 1280px and 390px, in light and dark.

  • Sub-issues:

    • TRACK-72: the Change image button on the About page moved to the right edge (#157).
    • TRACK-73: the New issue fields now stack in one left-aligned column (#159). That PR also fixed the placeholder contrast rule from #156.

  • First pass (#160):

    • The Context tab's project header was missing the permission-based buttons, so owners didn't see New issue, Edit name, Members or Delete project, and anonymous readers were shown a favourite button. All project views now build that header the same way.
    • Empty Sub-issues and Linked issues cards now share the row equally.
    • The Priority badge was set 4px in from the other values in the issue sidebar.
    • The divider under the sprint card dates now spans the full card.
    • The About Tags row button now lines up with its count.

  • Second pass (#166):

    • Tokens: Create token now sits on the API tokens section, like Register connector sits on Connectors.
    • Profile: the image action is on the right edge.
    • Members: on phones, the member count badge no longer stretches the full width, and the Blocked users button no longer squeezes onto two lines.

  • Pages added during this sprint, checked on arrival:

    • Whiteboard (#165)
    • Insights (#167)
    • Profile, Login and Notifications account pages (#162)
    • the login page (#161)
    • the Sprints setting on the Members page (#163)

    All of them follow the same label-above-control layout with actions on the right edge.