Vertical-align lock icon with trash icon in category rows #31

New Issue

2026-06-28T14:00:04Z

admin commented

2026-06-28 14:00:04 +00:00

Bug

The lock icon on default categories (e.g. "Uncategorized") does not line up vertically with the trash icon on user categories (e.g. "Transport"). See attached screenshot — the trash sits roughly centered with the row text, the lock sits noticeably higher.

Root cause — app/src/main/java/dev/achmad/ledgerr/ui/screens/category/CategoryScreen.kt:203-216

if (category.isDefault) {
    Icon(
        imageVector = Icons.Outlined.Lock,
        contentDescription = stringResource(R.string.category_default_lock),
        tint = MaterialTheme.colorScheme.onSurfaceVariant,
    )
} else {
    IconButton(onClick = onDelete) {
        Icon(
            imageVector = Icons.Outlined.Delete,
            contentDescription = stringResource(R.string.category_delete),
        )
    }
}

The trash branch is wrapped in an IconButton (which has a 48.dp default IconButtonDefaults.iconButtonSize and intrinsic padding that vertically centers the icon relative to the row). The lock branch is a bare Icon whose size is the icon's intrinsic bounds (24.dp), so it sits at a different visual center than the trash.

Fix

Render the lock branch the same way as the trash branch — wrap it in an IconButton(onClick = { /* no-op */ }, enabled = false) (or use IconButton with onClick = {} and a null content description makes the button disabled visually but still reserves the same hit area). The disabled state is the correct semantic for "cannot interact" and matches the visual size of the trash button, so both icons sit at the same y-offset.

Acceptance criteria

The lock icon is vertically centered on the same baseline as the trash icon across all rows.
The lock icon is not tappable (no ripple, no clickable area). Either enabled = false on the IconButton, or a non-clickable wrapper — pick the one that keeps the icon visually identical to the trash.
No regression for the trash branch.
The row's right-edge alignment is identical for both branches (both icons should be the same distance from the right edge of the screen).

**Bug** The lock icon on default categories (e.g. "Uncategorized") does not line up vertically with the trash icon on user categories (e.g. "Transport"). See attached screenshot — the trash sits roughly centered with the row text, the lock sits noticeably higher. **Root cause** — `app/src/main/java/dev/achmad/ledgerr/ui/screens/category/CategoryScreen.kt:203-216` ```kotlin if (category.isDefault) { Icon( imageVector = Icons.Outlined.Lock, contentDescription = stringResource(R.string.category_default_lock), tint = MaterialTheme.colorScheme.onSurfaceVariant, ) } else { IconButton(onClick = onDelete) { Icon( imageVector = Icons.Outlined.Delete, contentDescription = stringResource(R.string.category_delete), ) } } ``` The trash branch is wrapped in an `IconButton` (which has a 48.dp default `IconButtonDefaults.iconButtonSize` and intrinsic padding that vertically centers the icon relative to the row). The lock branch is a bare `Icon` whose size is the icon's intrinsic bounds (24.dp), so it sits at a different visual center than the trash. **Fix** Render the lock branch the same way as the trash branch — wrap it in an `IconButton(onClick = { /* no-op */ }, enabled = false)` (or use `IconButton` with `onClick = {}` and a `null` content description makes the button disabled visually but still reserves the same hit area). The disabled state is the correct semantic for "cannot interact" and matches the visual size of the trash button, so both icons sit at the same y-offset. **Acceptance criteria** - The lock icon is vertically centered on the same baseline as the trash icon across all rows. - The lock icon is **not** tappable (no ripple, no clickable area). Either `enabled = false` on the `IconButton`, or a non-clickable wrapper — pick the one that keeps the icon visually identical to the trash. - No regression for the trash branch. - The row's right-edge alignment is identical for both branches (both icons should be the same distance from the right edge of the screen).

~~admin referenced this issue 2026-06-28 14:00:13 +00:00~~

Home: turn "See all" into a "View All" text button inside SectionHeader #32

admin referenced this issue from a commit

2026-06-28 14:09:36 +00:00

fix(#31): vertical-align lock icon with trash icon in category rows

admin referenced a pull request that will close this issue

2026-06-28 14:09:41 +00:00

fix(#31): vertical-align lock icon with trash icon in category rows #34

admin closed this issue

2026-06-28 14:21:13 +00:00

admin referenced this issue from a commit

2026-06-28 14:21:13 +00:00