#986 fix space takeup for url link icon

[baproactive]

No description provided.

[baproactive]

@raineorshine
Would you review this one?
I can't find an option to add this PR to you, so just ping you via comment.

[raineorshine]

It does fix the case in #986, but breaks the url icon on multiline urls:

(FYI This is covered by this snapshot test, but it is missing on ubuntu, so you'll need to generate the base snapshot by running the test with -u on main.)

Current Behavior

f2ecc3c

Expected Behavior

main

[raineorshine]

I'm now seeing that this does not result in the correct height unfortunately. (Careful with a quick fix of a px offset here; the height needs to work across all font sizes. Please justify your solution.)

Current Behavior

a4f9b63

Height of single-line and ellipsized urls are too large.

Expected Behavior

main

[baproactive]

I found fixes and pushed the update.
The root cause was height difference between .though-annotation and .thought when it's single line.
It was due to the overflow: hidden adding up extra space to the parent.
It is fixed by adding vertical-align: top to the .thought-annotation's span text.
I added inline comment as well.

[raineorshine]

I can confirm the single-line urls have the correct height now. Good to know about vertical-align: top.

I'm noticing that when the cursor is on a multiline thought, the height is too high.

I modified the url snapshot test so that it covers this case. You can get it if you rebase on main.

[baproactive]

Found the root cause of this issue - it's due to the a tag modifying the last line of the thought annotation text when it's multiline.
I updated the a tag position to absolute to make sure it doesn't affect the annotation text lineheight.

[raineorshine]

The url link has to be part of the document flow and cause the thought to wrap, otherwise it can get cropped by the right edge of the screen on mobile. There is not enough margin-right on mobile when the thought goes to the end of the line.

(You can enable the mobile layout by using the Device Toolbar in Chrome Dev Tools.)

Maybe try limiting the height of the url link instead?

[baproactive]

Hi @raineorshine
I have update the approach slightly.

position absolute on the thought-annotation a tag causes the mobile issue you mentioned, instead I set the a tag height to make sure it doesn't affect the thought annotation text's height.
Please check.

[raineorshine]

The url link shifts position when the cursor is set on it:

Screen.Recording.2024-07-26.at.5.38.56.PM.mov

[raineorshine]

I've split up the url snapshot tests into three tests:

• single-line url (failing)
• multi-line url (failing)
• url child (passing)

That should cover all the test cases we have discussed in this thread except the mobile test case (normally that would be tested with WebdriverIO but that suite is broken currently).

I omitted the failing snapshots until they can be generated correctly. Run yarn test:puppeteer -- snapshot -t url to run the tests and -u to update.

[baproactive]

I've fixed the url icon jumping issue.
it was due to position absolute calculation diff.

[raineorshine]

I've split up the url snapshot tests into three tests:

• single-line url (failing)
• multi-line url (failing)
• url child (passing)

That should cover all the test cases we have discussed in this thread except the mobile test case (normally that would be tested with WebdriverIO but that suite is broken currently).

I omitted the failing snapshots until they can be generated correctly. Run yarn test:puppeteer -- snapshot -t url to run the tests and -u to update.

I think my commit may have gotten overwritten by your last force push. Sorry that I wasn't clear I had pushed it to the PR branch. I pushed it again (6b100c2).

[raineorshine]

I can confirm the url jumping issue is fixed. Thanks.

Noticing a couple regressions:

1. At lower font sizes, the url link now incorrectly wraps. I added ce69a0f to run the url tests at font size 18 and 14 to cover this case.

2. The clickable area of the url link has been diminished. The entire link with a few pixels of padding should be clickable, as in main. As of 3881190 it's only clickable along the right edge:

Screen.Recording.2024-08-01.at.11.29.17.AM.mov

[raineorshine]

This looks good to me. I have manually tested and confirmed the following cases are working:

• multiline url: url icon should be inline
• multiline url with cursor: height should be the same
• height of single-line and ellipsized urls should be the same
• url icon should not shift position with cursor
• at lower font sizes, url icon wraps
• [mobile] url icon should not be cropped

This issue is partially fixed:

• extended click area - The top, right, and left sides correctly extend the click area. The bottom does not.

Given the nearly complete coverage of the observed issues, I am satisfied with this PR and think it should be merged. I will open a separate issue for the minor click area issue.

Thanks so much for your persistence! :)