Aman-Mittal opened a new issue, #444:
URL: https://github.com/apache/fineract-backoffice-ui/issues/444
Split out of #436, which scoped and shipped the deployment-customization
track and closed with
this part untouched. Recording it as its own issue so it is tracked rather
than living in a
"not included" line.
## The problem
There are **five media queries** in the whole of `src/`, across 289 feature
components — and one of
those five is `prefers-reduced-motion`. The application is a desktop layout
that a phone happens to
be able to load.
Concretely, at 412px:
| | |
| --- | --- |
| Sidebar | a fixed 240px column, two thirds of the width, with no way to
dismiss it |
| Tables | horizontal scroll; the first column is pinned and everything else
is off-screen |
| Height | `100vh`, which mobile browsers measure against the viewport with
the URL bar retracted — so the bottom of every page sits under the browser
chrome |
| Header | eight controls crushed into one bar: a searchbar too narrow to
read its own placeholder, and a red Logout button as the loudest element on the
screen |
| Content gutter | `padding: 2rem` — 64px of a 360px screen gone before any
content |
Field officers and branch staff are a real part of who uses this, and a
phone is what they have.
## Scope
**In:** the shell — navigation, tables, header, spacing — and the machinery
to keep it working.
**Out:** rebuilding individual feature screens. Most sit in the content
column and inherit whatever
the shell does; `DataTableComponent` backs 107 of the 289 feature
components, so fixing the shared
table reaches most lists without touching them.
## What it needs
- [ ] **One breakpoint**, shared between the CSS and TypeScript. It cannot
live only in CSS: CSS
can move the sidebar off-canvas, but cannot tell the component the
sidebar is now a dialog —
`role="dialog"`, focus handling, Escape, and `inert` while hidden so
it is not a long run of
invisible tab stops.
- [ ] **Sidebar as a modal drawer** below the breakpoint, closing on the
backdrop, Escape, its own
control, and on navigating.
- [ ] **Tables as cards**, from the existing column definitions rather than
a second template, so a
column cannot be added to one layout only.
- [ ] **A header designed for the width**, rather than the desktop one with
things hidden.
- [ ] **`100dvh`** and a content gutter that steps down.
- [ ] **Enforcement.** A static check for the invariants that have one
correct answer, and an e2e
project at a real phone viewport for the behaviour a regex cannot see.
Without both, this
regresses the first time someone adds a screen.
## Acceptance criteria
- [ ] No horizontal scroll at 320px
- [ ] Every interactive control clears a 44px touch target
- [ ] The drawer is genuinely modal: focus moves in, `inert` while closed,
Escape closes it
- [ ] Lists are readable without sideways scrolling
- [ ] The desktop layout is unchanged above the breakpoint
- [ ] CI fails on a regression rather than relying on someone opening a phone
## Deferred
`primaryColumns` on `DataTableComponent` — collapsing a card to its most
important fields with the
rest behind a disclosure. Worth having, not needed for the layout to be
usable, and it adds an
input to a component 107 screens depend on. Its own change.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
