1342029 - remove button in about:home appears over text

Status: RESOLVED FIXED

(Snippets :: Campaign, task)

Description

[Mohammad Maruf Rahman]

Attachment: the remove icon appears over the text

Build  ID  20170221004019
UserAgent  Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:53.0) Gecko/20100101  Firefox/53.0

Steps to reproduce : 

1. open Firefox developer edition (aurora) 
2. go to about:home
3. under the search bar there is "Fun Fact"

Actual Result : The remove icon in of the "Fun Fact" is appearing over the text

Expected Result : The remove icon should appear in a vacant palce

[bugday-20170222]

Comment 1

[:Gijs (he/him)]

This isn't a Layout bug unless our CSS is somehow not working.

But this really needs some way to reproduce with more details. Cosmin, were you able to reproduce?

Comment 2

[Cosmin Muntean [:cmuntean], Ecosystem QA]

I was able to reproduce the issue, but now the RDM message is no longer displayed on "about:home" page. 

The issue was only reproducible for the RDM message from "about:home" page (the massage from the provided screenshot). When the text was hovered the "[x]" button was displayed over the text.

I am not sure if the RDM message will be displayed in the future, if not we can close this issue?

Comment 3

[:Gijs (he/him)]

(In reply to Cosmin Muntean [:CosminMCG] from comment #2)
> I was able to reproduce the issue, but now the RDM message is no longer
> displayed on "about:home" page. 
> 
> The issue was only reproducible for the RDM message from "about:home" page
> (the massage from the provided screenshot). When the text was hovered the
> "[x]" button was displayed over the text.
> 
> I am not sure if the RDM message will be displayed in the future, if not we
> can close this issue?

I don't know. Arcadio, I'm told you might know more about this snippet and who made it?

Comment 4

[alainez]

Hi...yes. The Life Cycle Marketing team. Adding them here.

Comment 5

[wes winton]

Thanks, Arcadio.

It looks like the overlap happens when there are more than two lines of text. Flagging Giorgos, our master snippet mechanic. 

Giorgos, is there any way we can get some extra spacing between the block button and the snippet text?

Comment 6

[Giorgos Logiotatidis [:giorgos]]

First of all something that's not visible in the screenshot: The remove button appears only when the mouse is over the snippet.

The whole UI and UX follows guidelines we received back in the day to match the way Tiles look and thus the button is same and it appears on hover above content. 

That said if you still want to change this we can, it's a snippet template change.

Comment 7

[dvincent]

Attachment: sauce.jpeg

Comment 8

[dvincent]

I personally believe we should not fix this. It's not happening with all the three-line snippets (see attachment).

Comment 9

[Jean Collings]

Apologies for the delay. Giorgos, I just spoke with the Firefox Product and UX team and they would like the template fixed so the "X" doesn't hover over text. 

Do you have time to work on this soon and do you need any design assistance from UX? Please let me know, thanks!

Comment 10

[Giorgos Logiotatidis [:giorgos]]

I'll be in a workweek next week, so this will be worked from the week of 27th. It would be valuable to get UX pointers during next week, i.e. place the button over the text or on the right of the text?

Comment 11

[Jean Collings]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #10)
> I'll be in a workweek next week, so this will be worked from the week of
> 27th. It would be valuable to get UX pointers during next week, i.e. place
> the button over the text or on the right of the text?

Great thanks Giorgos! This is the feedback I got from Aaron Benson, "Ideally, both. The icon could be floated in the upper-right corner of that "box" where the snippet lives. Example: https://cl.ly/3X0w3e0A3I0P"

Comment 12

[Giorgos Logiotatidis [:giorgos]]

This is WIP. Here's the pull request https://github.com/mozmar/snippets/pull/106

Comment 13

[Giorgos Logiotatidis [:giorgos]]

This is now in production

Comment 14

[Jean Collings]

Attachment: Screen Shot 2017-03-29 at 12.33.34 PM.png

Giorgos, thank you for fixing this. 

Can you check snippets 6455 and 6453? I cannot tell in preview if the fix is working. I checked on about:home about 4 hours after you pushed to production and I'm still getting the "x" covering some text as seen in the attachment. 

Let me know, thanks!

Comment 15

[Giorgos Logiotatidis [:giorgos]]

jean I cannot reproduce the issue. I's probably a stable cache, now it seems to be working. Feel free to re-open the bug if it doesn't for you.

Comment 16

[Jean Collings]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #15)
> jean I cannot reproduce the issue. I's probably a stable cache, now it seems
> to be working. Feel free to re-open the bug if it doesn't for you.

All good, the changes finally rolled out. Thank you again!