fix: improve the outfit selection grid UI - #60
Merged
Conversation
The label was drawn on top of the garment photo, so on a 100dp cell it sat over the image with no line limit — long names covered the whole photo and were unreadable either way. The cell is now the photo alone; each cell still exposes the item name as its content description / accessibility label, so screen readers are unaffected. Adds an outfit_item_cell test tag / accessibility identifier so journeys can target the cells, matching clothing_card and outfit_card. Closes #44 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
AI-generated names run long; unbounded, a four-line name pushed the category row down and left the card misaligned with its neighbour in the grid row. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Covers the Create-outfit selection grid: photo-only cells with no name text over the garment, and selection on tap. Unlike the other journeys it needs a populated wardrobe, so the fresh-install precondition note now points at each journey's own description. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Create-outfit "Select items" grid drew each item's name on top of its photo with no line
limit, so on a 100dp cell a long name covered the whole garment and was unreadable either way
(see #44). The name is now gone from those cells — the cell is the photo, its border, and the
selection indicator. Each cell still exposes the item name as its content description /
accessibility label, so screen readers are unaffected.
While in the same class of bug, the wardrobe card's name was also unbounded: a four-line name pushed
its category row down and left the card misaligned with its neighbour in the grid row. It is now
capped at two lines.
Closes #44
Changes
CreateOutfitSheet.kt/.swift— remove the name label fromSelectableItemCell; add anoutfit_item_celltest tag / accessibility identifier so journeys can target the cells, matchingthe existing
clothing_cardandoutfit_cardClothingCard.kt/.swift— cap the item name atmaxLines = 2/.lineLimit(2)with tailtruncation. No reserved second line, so one-line cards keep their current height
journeys/outfit-item-grid.xml— new journey covering photo-only cells and selection on tapjourneys/README.md— this is the one journey needing a populated wardrobe, so the fresh-installprecondition note now defers to each journey's own description
Test plan
Verified on
emulator-5554(./gradlew :composeApp:assembleDebug→android run --apks …), with awardrobe seeded so one item's name is long enough to have wrapped to four lines before the change.
All six actions of
journeys/outfit-item-grid.xmlPASSED:android layout/uiautomator dump: twooutfit_item_cellnodes at[63,1821][360,2084]and[392,1821][689,2084]— 100dp tall, no child text nodes (the label is gone), each carryingthe item name as its
content-desccards' photos stay aligned
Checklist
./gradlew detektpassesreview-verified as a mirror of the Compose one. The iPhone/iPad
#Previews need a run inXcode before merging.
journeys/README.md🤖 Generated with Claude Code