layout improve

[GingerBear]

• this should fix Occasional annotation highlight missmatching. #74. the reason it's off is because the div used for text calculate is 20px larger than the actual div that display the text.
• this PR also made some improvement over the line break for text that contains new line character. for example of the one in Occasional annotation highlight missmatching. #74
• this PR also made some improvement over text lines that does't have annotations, so that no extra lines are inserted.

[hunterhector]

Some problems in the previous issues are fixed. But it looks like there are two residual problems

1. Selecting one of the legends seems to add too many new lines. See the comparison of the following two screenshots. After selecting the WikiSection legend, there is several more new lines before "See also"

---

---

---

2. If we narrow the browser window a bit more, somehow the calculation of the annotation is off again (smaller than the actual text length).

[GingerBear]

fixed the second issue. For the first issue, the extra space was kept for display lines and text label, it's not smart enough to further adjust by the context when those doesn't exist. Let's keep that for another time to fix.

[hunterhector]

fixed the second issue.

Just tested it, looks OK now.

For the first issue, the extra space was kept for display lines and text label, it's not smart enough to further adjust by the context when those doesn't exist. Let's keep that for another time to fix.

Yeah. Let me create another issue for this.

[GingerBear]

this is a good example for that we need more examples to make the tools better

[GingerBear]

Yeah. Let me create another issue for this.

already created at #77

[hunterhector]

Yeah. Let me create another issue for this.

already created at #77

Thanks. I think this PR looks good, will merge it.

Btw, I will also create an Issue template to help other people understand thee.