833140 - [Settings] Text overlap between device name and switch icon on BT menu

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Settings, defect)

Description

[Leo]

1. Title : Text overlap between device name and switch icon on BT menu
2. Precondition : setting - bluetooth - rename my device
3. Tester's Action : input long text
4. Detailed Symptom (ENG.) : text overlap with switch icon
6. Expected : 
7. Reproducibility: Y
1)Frequency Rate : 100%
8. Gaia revision : a03f7b532e9998e646d55f93a0fc03a04d7ca7d9

Comment 1

[Leo]

Github URL
https://github.com/mozilla-b2g/gaia/pull/8114
https://github.com/leob2g/gaia/commit/506a32ab87eb59917b3748a737e7c4e2995d42ef

Comment 2

[Arthur Chen [:arthurcc][inactive after 6/30]]

Hardcoded the length of the name is not a good idea since the length depends on style and screen resolutions. The style for list items should have handled text overflow. I noted that it works after the device gets paired. We should find the root instead of trimming the device name.

Comment 3

[Leo]

Attachment: patch

Comment 4

[Arthur Chen [:arthurcc][inactive after 6/30]]

Attachment: Patch v1

Simply inherits the overflow settings from ul.

Comment 5

[hyuna.cho]

(In reply to Arthur Chen [:arthurcc] from comment #4)
> Created attachment 746882 [details]
> Patch v1
> 
> Simply inherits the overflow settings from ul.

It's just a patch for device list overlap. This issue aleady raised on Bug 861768.
In my patch, I modifed the subline overlap of my devince name.
I attached the screenshot. plz check again.

Comment 6

[Leo]

Attachment: screenshot applied Patch v1

Comment 7

[Evelyn Hung]

Comment on attachment 746766 [details]
patch

redirect to Arthur. Thanks!

Comment 8

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 746766 [details]
patch

Hyuna, thank you for the screenshot! I misunderstood the issue. Regarding your patch, please check my comment in github.

Comment 9

[Arthur Chen [:arthurcc][inactive after 6/30]]

Pavel, could you give some input here? I would like to make sure we won't mess up anything when trying to modify |right| value in |ul li > label:not([for]) + small|. Thanks!

Comment 10

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hi,
I think we just need to increase the |right: 6rem| to |right: 9rem| here:
https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/lists.css#L94

and also we nee to do the sam think but for the left [RTL] here: 
https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/lists.css#L447

Hoper this one helps :)

Comment 11

[Arthur Chen [:arthurcc][inactive after 6/30]]

Thanks Pavel! 

Hyuna, could you update the patch based on Pavel's comment? Thanks!

Comment 12

[Leo]

Attachment: patch_v2

plz check updated patch_v2

Comment 13

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 748619 [details]
patch_v2

Thanks for the patch. r=me

Comment 14

[Arthur Chen [:arthurcc][inactive after 6/30]]

master: https://github.com/mozilla-b2g/gaia/commit/7cf075f1b3fb9ccd00bc2f305b7ba1381ab7f012

Comment 15

[hyuna.cho]

(In reply to Arthur Chen [:arthurcc] from comment #14)
> master:
> https://github.com/mozilla-b2g/gaia/commit/
> 7cf075f1b3fb9ccd00bc2f305b7ba1381ab7f012

Plz land the patch into v1-train

Comment 16

[Wayne Chang [:wchang]]

Triage -Not a blocker considering quite a long name is required for this bug to show.