[Core][Quick Docs]: URL and CSS Property name tag on the left column in Quick Docs cannot be wrapped when resize the window.

[julieyuan]

Steps:

1. Launch Brackets and open a CSS file
2. Put the cursor in a property name, like: text-shadow, word-wrap (sample file please refer to here)
3. Press Cmd-K to open Quick Docs.
4. Drag the right sidebar to the left.

Result:
The URL and property name tag are not wrapped and appears on the right column.

Expected:
They should be wrapped and only appears on the left column.

ENV: MAC10.8 and Win8.1 English OS
Build: 0.33.0-9858

Snapshots:
Please refer to snapshots for details:

[peterflynn]

@julieyuan Has this always been the case (e.g. back in Sprint 24 when Quck Docs was introduced)? Or is it a more recent regression?

[julieyuan]

@peterflynn I think this issue is caused by the change of webdocs. I checked it with Sprint 30, it not reproduces for the content is not the same. But it indeed reproduces in Sprint 32. Here is the snapshot with Sprint 30 for reference:

[RaymondLim]

It was introduced when we added the close button to the inline editor. @larz0 can you try to fix it in the css?

[larz0]

@RaymondLim yes I can take this one.

[larz0]

@RaymondLim pull request is up.

[njx]

Marking low pri, fix in progress.

[RaymondLim]

FBNC to @julieyuan

[julieyuan]

Thanks @larz0 for fixing this issue. Checked it with build 0.33.0-10187. These two properties above are fixed.Here is the snapshot for reference:

For this issue, I have a little bit confusion. Is it possible that the URL is wrapped by word ? I mean, it is wrapped as:
css/
properties/
wrap
instead of :
cs
c/properties/word-
wrap
Anyway,the fix right now is already good enough 👍
If it could be wrapped by word and be fixed easily, it will be an improvement, but it is not necessary if it needs much effort.

There is another related issue.When I checked this issue, I found that anoter property box-shadow is not wrapped correctly with long string. Here is the snapshot for details:

@RaymondLim or @larz0 , could you help to take a look?

[larz0]

@RaymondLim new pull request is up.

[julieyuan]

Please also note the property of background-color and background-image. Here is the snapshot with build 0.33.0-10191:

[larz0]

Thanks @julieyuan this is fixed in #5755 (Breaking words for the entire column.)

[marcelgerber]

@larz0 Wouldn't it be better to use word-wrap: break-word; instead of word-break: break-all; as this breaks the words in a more normal way?

Currently:

With word-wrap:

And it also does it's job when there is such an situation as in your screen of background-color.

[larz0]

Thanks @SAplayer I'll take a look. Not sure why the hyphens property isn't working.

[RaymondLim]

@larz0
I did verify that @SAplayer 's change works for all the reported issues. And the hyphens property is also working for me. Are you saying it's not working with the change to word-wrap property?

[larz0]

@RaymondLim I couldn't get hyphens to work for Background-Color using word-wrap: break-word

[RaymondLim]

@larz0 That's correct behavior in your screenshot since your first column width is too narrow to fit background-, but it should break at hyphen if your column width is wider to fit more than background- as in the following screenshot.

[larz0]

@RaymondLim the pull request is up #5835

[RaymondLim]

@larz0 Sorry that I misunderstood you on hyphens property. I just tried it on Safari browser to see what it is used for. But again, it is not yet supported in Chrome and therefore never worked since your first version.

[marcelgerber]

Thanks @larz0, looks good.

[julieyuan]

Checked this issue with build 0.34.0-10270. It is fixed. Thanks a lot.
Closing it. Here are snapshots for reference: