planetary-ios icon indicating copy to clipboard operation
planetary-ios copied to clipboard

Tap target to edit bio is too small on iPad

Open mplorentz opened this issue 3 years ago • 7 comments

When editing your bio on the iPad, the tap target to get the keyboard to present is way to small. This has led multiple users to think that it is broken and they can't edit their bio at all. We should expand it to fill all the whitespace.

IMG_940D5DB8B06D-1

mplorentz avatar Mar 29 '22 14:03 mplorentz

@mplorentz mind if I take a crack at fixing this one?

czuria1 avatar Oct 03 '22 02:10 czuria1

@czuria1 all yours! Please reach out here or on Matrix or Discord if you have any issues.

mplorentz avatar Oct 03 '22 15:10 mplorentz

I noticed that this view is shared between iPhone and iPad, so this bug is on both. If the goal is to have the tap area be the entire bottom empty area, then should the text view be below the "Bio" label? Or any thoughts or direction how the tap area and label placements should be?

image image

czuria1 avatar Oct 05 '22 03:10 czuria1

@czuria1 hm good question. My first instinct is to say that maybe "Bio" should just be placeholder text in the textbox. If we did that we might want to do the same for Name too so it's easy to keep the labels lined up? What do you think @Chardot?

mplorentz avatar Oct 05 '22 17:10 mplorentz

Another option might be to leave the layout as-is but slap a big UITapGestureRecognizer over the whole bottom area, and when it is tapped it would call becomeFirstResponder() on the the "bio" text field to give it focus.

mplorentz avatar Oct 05 '22 17:10 mplorentz

@czuria1 @mplorentz I also think the text area for the bio should occupy the entire bottom area. Additionally, it would be great if both fields were 100%-width block elements that sit right below their labels as shown in the picture: EditProfile

To make the interactive area more noticeable, their border could be the same style (width and color) as the current separator line between them, for both light and dark modes. In the example I also used a 4px corner radius.

Chardot avatar Oct 07 '22 06:10 Chardot

Thank you for the input and feedback @mplorentz @Chardot! I agree on the gray border and be consistent on the styling for both 🙂 I'll work on updating that component!

czuria1 avatar Oct 07 '22 06:10 czuria1

This is complete! Thanks for the contribution @czuria1!

mplorentz avatar Nov 28 '22 14:11 mplorentz