Web - Chat - Extra padding above header link and cursor displays as a hand over extra padding

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue found when executing PR #19545

Action Performed:

1. Go to staging.new.expensify.com
2. Go to chat.
3. Type # google.com and send the message.

Expected Result:

There is no extra padding above the link and the cursor only becomes a hand when hovering over the link.

Actual Result:

There is extra padding above the link. The cursor becomes a hand when hovering over the extra padding, although it is not clickable.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.27.4

Reproducible in staging?: yes

Reproducible in production?: yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6092587_Recording__67.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Nikhil-Vats]

The PR #19545 is reverted and that's why these two issues are not fixed anymore. Issues already exist for both these so we can close this.

[ahmedGaber93]

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

There is no marginTop value to h1, so it set to default value (about 9px in chrome from inspector)

App/src/styles/styles.js

Lines 142 to 145 in 78145cf

	h1: {
	fontSize: variables.fontSizeLarge,
	marginBottom: 8,
	},

What changes do you think we should make in order to solve the problem?

Add marginTop to h1 marginTop: 0; or marginTop: 2; or what we agree on in this line here

This part of style not apply for all h1 in web, it will apply only for HTML code render by 'react-native-render-html' which used in chat.

What alternative solutions did you explore? (Optional)

[ahmedGaber93]

@Nikhil-Vats I think the issue found when executing PR #19545, but it is not related to #19545, it related to h1 style itself, and if you try to test with h1 without link it will see the extra padding.

[Nikhil-Vats]

@ahmedGaber93 the PR also fixed #17488 which is same as this one and you can check in the PR description. So, this one can be closed as there is already an open issue for this.

[abekkala]

#17488