Page MenuHomePhabricator

[native] Fix long names intersecting with the search button
ClosedPublic

Authored by inka on Jun 5 2023, 1:03 AM.
Tags
None
Referenced Files
F1569601: D8091.id27438.diff
Thu, Apr 18, 4:04 AM
F1569599: D8091.id27437.diff
Thu, Apr 18, 4:04 AM
F1569587: D8091.id.diff
Thu, Apr 18, 4:04 AM
F1569574: D8091.diff
Thu, Apr 18, 3:59 AM
Unknown Object (File)
Mon, Apr 1, 12:02 PM
Unknown Object (File)
Fri, Mar 29, 2:33 AM
Unknown Object (File)
Mar 5 2024, 9:22 PM
Unknown Object (File)
Feb 23 2024, 8:02 PM
Subscribers

Details

Summary

issue: https://linear.app/comm/issue/ENG-3925/long-names-intersecting-with-search-button
from documentation (https://reactnavigation.org/docs/3.x/stack-navigator/#headertitlecontainerstyle):

By default, headerTitleContainerStyle is with an absolute position style and offsets both left and right. This may lead to white space or overlap between headerLeft and headerTitle if a customized headerLeft is used. It can be solved by adjusting left and right style in headerTitleContainerStyle and marginHorizontal in headerTitleStyle.

Our problem was with the headerRight, but an analogical solution worked

Test Plan

Simulator Screenshot - iPhone 14 Pro - 2023-06-05 at 09.10.30.png (2×1 px, 252 KB)

When there are no buttons:

Simulator Screenshot - iPhone 14 Pro - 2023-06-05 at 09.07.33.png (2×1 px, 342 KB)

On android long names were always cut pretty short. Before my changes:

Screenshot_20230605_095025.png (2×1 px, 209 KB)

After my changes:

Screenshot_20230605_094533.png (2×1 px, 210 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

inka requested review of this revision.Jun 5 2023, 1:20 AM
This revision is now accepted and ready to land.Jun 5 2023, 4:07 AM