Aman-Mittal opened a new issue, #574:
URL: https://github.com/apache/fineract-backoffice-ui/issues/574
Found while walking the deployed build at 390x844 (iPhone-class viewport).
Two defects on the same screen, both caused by desktop-only layout rules that
have no mobile breakpoint.
> **Screenshot:** _client detail at 390 px, dark theme — `+ NEW ACCO…`
clipped mid-word, no `Back` button anywhere on screen, and `Activation Date`
reading `9/21/2`._ (attached below)
## 1. `Back` is rendered outside the viewport and cannot be tapped
The action row on the client detail header lays four buttons out in a single
non-wrapping flex line. Measured at a 390 px viewport:
| Button | left | right |
|---|---|---|
| Edit | 52 | 139 |
| Actions | 151 | 268 |
| New Account | 280 | **401** |
| Back | **413** | **501** |
The row's content width is 449 px inside a 390 px viewport. `New Account` is
clipped at the edge; `Back` sits entirely outside it.
This is not merely cosmetic — the button is genuinely unreachable:
- the clipping ancestor `ion-card.header-card` computes `overflow-x: hidden`
(`scrollWidth` 465 vs `clientWidth` 318), so nothing scrolls into view;
- the document does not scroll horizontally either
(`document.documentElement.scrollWidth === clientWidth === 390`);
- `document.elementFromPoint()` at the clamped x returns
`main.content-area`, not the button.
So on a phone the only way back is the browser's own back gesture or the
breadcrumb.
**Root cause** — `.actions-area` has no `flex-wrap` and no mobile breakpoint:
```scss
.actions-area {
display: flex;
gap: 12px;
align-items: center;
}
```
`src/app/features/clients/client-view.component.ts:997`
The same block is duplicated on three more detail screens, so the defect
repeats there:
- `src/app/features/loans/loan-view.component.ts:1487`
- `src/app/features/products/deposit-account-view.component.ts:604`
- `src/app/features/products/loan-product-view.component.ts:198`
**Suggested fix** — add `flex-wrap: wrap`, and under `@media (max-width:
768px)` either stack the buttons full-width or fold the secondary ones into the
existing **Actions** menu. Worth extracting the four copies into one shared
component while touching them.
## 2. `.info-grid` stays two-up at every width, truncating values
`.info-grid` is fixed at two columns regardless of viewport:
```scss
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
```
`src/app/features/clients/client-view.component.ts:1010`
At 390 px that resolves to **`123px 123px`**. The result is data loss on
screen, not just tight spacing:
- `Activation Date` renders as `9/21/2`
- `Timeline (Submitted)` renders as `9/21`
Every label also wraps to two lines while its value stays right-aligned on
the first, which makes the pairs hard to read.
**Suggested fix**
```scss
@media (max-width: 768px) {
.info-grid { grid-template-columns: 1fr; }
}
```
## Reproduction
1. Sign in and open any client detail screen.
2. Set the viewport to 390x844 (DevTools device toolbar, iPhone 12/13/14).
3. The `Back` button is absent from the screen; `+ New Account` is cut off
at the right edge.
4. Read the `Contact & Status` card — the two dates are truncated.
## Tested against
Deployed build of `main`, verified in Chrome at 390x844 (DPR 1 and 3). Line
references are against `27d5a441`; the deployed bundle may lag slightly, so
confirm the line numbers before patching.
--
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]
