remove button in about:home appears over text

RESOLVED FIXED

Status

Snippets
Campaign
RESOLVED FIXED
a year ago
a year ago

People

(Reporter: Mohammad Maruf Rahman, Assigned: Jean Collings (Maternity Leave 4/6/18 - ping Kat Plam for Leanplum, Michele Warther for Snippets))

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

a year ago
Created attachment 8840408 [details]
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]
Component: General → Layout
Product: Firefox → Core

Comment 1

a year ago
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?
Component: Layout → Untriaged
Flags: needinfo?(cosmin.muntean)
Product: Core → Firefox
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?
Flags: needinfo?(cosmin.muntean)

Comment 3

a year ago
(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?
Assignee: nobody → jcollings
Component: Untriaged → Campaign
Flags: needinfo?(alainez)
Product: Firefox → Snippets

Comment 4

a year ago
Hi...yes. The Life Cycle Marketing team. Adding them here.
Flags: needinfo?(wwinton)
Flags: needinfo?(dvincent)
Flags: needinfo?(alainez)

Comment 5

a year ago
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?
Flags: needinfo?(wwinton)
Flags: needinfo?(giorgos)
Flags: needinfo?(dvincent)
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.
Flags: needinfo?(giorgos)

Comment 7

a year ago
Created attachment 8842026 [details]
sauce.jpeg

Comment 8

a year ago
I personally believe we should not fix this. It's not happening with all the three-line snippets (see attachment).
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!
Flags: needinfo?(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?
Flags: needinfo?(giorgos)
(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"
Flags: needinfo?(giorgos)
This is now in production
Status: NEW → RESOLVED
Last Resolved: a year ago
Flags: needinfo?(giorgos)
Resolution: --- → FIXED
Created attachment 8852638 [details]
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!
Flags: needinfo?(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.
Flags: needinfo?(giorgos)
(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!
You need to log in before you can comment on or make changes to this bug.