Here are some explorations for a potential solution:

1. Break the URL on a new line (with no hyphens). Maybe with word-break: break-word; thou it would also be interesting to explore other properties like overflow-wrap.
   

2. Decrease the URL font size: we could reduce the URL font size to 13px on a 15px line height in order to fit longer URLs.
   

3. Truncate the URL with ellipsis.
   

Of all the options described above I favor option 3 as it doesn't increase the number of lines (the question is already quite long) and it doesn't introduce any visual difference. Moreover we are using the URL to emphasize to which wiki we are referring to in the question, and the important part to make this clear is at the beginning of the URL, eg. en.wiki..., fr.wiki...,. So it would be a fair compromise to cut the URL ending/domain.

After playing around, and with mucho help from Jason, here are some ideas
280x653

at 150px width

what happens in code
Moved the close button to not be located after message, allowed overflow-wrap, changed "ext-quicksurveys-internal-gdi-safety-survey-question" in en.json to ({{SERVERNAME}}) to NowIsTheTimeForAllGoodFolkToComeToTheAidOfTheirCountryAndZoo for testing
close button has been set to be 'in line' with the first string of text, which may add to the issues of display of close button

This seems to work fairly well, from what can be seen from various emulations available to several different browsers.

So, at this point I need some feedback on how things need to look/be

Hi @ERayfield thanks for the updated! Together with Joaquin we opted for the original solution in order to 1) visually align the close button to the first line of the question, see T294894#7488972 and 2) keep the question container separated from the close button container, see T184760#7460765.

Is it possible to truncate the URL with ellipsis? We would prefer to opt for this solution as it keeps the original design and does not increased the visual length of the question. I add a visual to better explain the desired solution. Let me know! Many thanks!

Hey @aminalhazwani. sorry about not understanding that the decision had already been made. That being said, are you wanting this for each string that may cause an overflow or wrap (I don't have any ideas what those words would be, but I know there are some really long strings for various languages)?

Thanks @ERayfield, to summarize what we chatted about during RTL I prepared this mockup. We will opt for the break-word/overflow-wrap solution as you suggested, but if it's possible we would keep the close button container separated from the question container, see blue overlay to highlight the difference. This approach will support a stronger visual separation of concerns between the question and the close button in the instances where we would have a long word on the second line that would sit next to the close button, hence making it less visible. This solution should be possible if we keep manage to maintain the original layout that Joaquin developed when we initially implemented the opt out feature T294894#7488972.

set to 360x760 cell

view enlarged, emulator for Nokia 81104G upright

view enlarged emulator for Nokia 81104G side

COLOR IS FOR EXAMPLE ONLY - cyan marks the section where the close button ('x') is sitting. If this is correct, I'll remove the color (and other stuff) and push it up.

@ERayfield aside from color ;), it looks like just what was asked for to me! I'd go ahead and push it up for @aminalhazwani and the team to review. We could also set up a patch demo for it. @Scardenasmolinar knows how to do this.

I can set up the patch demo as soon as there is a Gerrit patch :)

Great, thanks @ERayfield! Feel free to push this to review. If we are able to set a patch demo it would super useful, thanks again!

@Scardenasmolinar thanks much! Will give you a yell soon

Change 774897 had a related patch set uploaded (by EllenR; author: EllenR):

[mediawiki/extensions/QuickSurveys@master] fixed close button for QuickSurvey

https://gerrit.wikimedia.org/r/774897

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/31685c4718/w/

This looks good in mobile, but we have incorrect behavior in desktop. Note question text flowing under the close button.

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2515e6146e/w/

Okay, this issue should be resolved now. Note the empty column beneath the x button where the description used to flow:

here's the problem running live:
https://patchdemo.wmflabs.org/wikis/31685c4718/wiki/New_York_(state)?quicksurvey=external%20example%20survey

and here's my fix running live:
https://patchdemo.wmflabs.org/wikis/2515e6146e/wiki/New_York_(magazine)?quicksurvey=external%20example%20survey

Change 774897 merged by jenkins-bot:

[mediawiki/extensions/QuickSurveys@master] fixed close button for QuickSurvey

https://gerrit.wikimedia.org/r/774897

Using the following PatchDemo URL (https://patchdemo.wmflabs.org/wikis/2515e6146e/wiki/New_York_(magazine)?quicksurvey=external%20example%20survey) I was able to verify the fix via Dev Tools (with Dev Tools available device emulators).

@jsn.sherman I was wondering if we should apply the same survey title properties to the survey description in the scenario where no survey title is defined. What do you think? In the example below I used a calc function only to share what this potential margin should take into account: the margin right of 16px + the icon real estate of 24px.

@aminalhazwani I'm not sure which part of the survey you are talking about when you say title
I've taken your image and marked up the names of the different survey parts below

Thanks @jsn.sherman, yeah, I meant the survey question (or survey title if we think about the thank you message view that comes once you submit an answer). I was wondering if the spacing properties of the survey question (or survey title) should be reflected in the survey description too whenever the question/title is not defined.

@aminalhazwani surveys have to have a question; they should throw a validation error and not display if that is missing. So, we're really talking about the "completed" state with the confirmation message, additional info, and/or privacy policy. In that case, there will always be a confirmation message (which we also call the thank you message).

Perfect, thank you @jsn.sherman for taking the time to share all the additional details, it's very appreciated! And sorry everyone for any potential noise on this ticket, cheers!

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2515e6146e/w/

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/31685c4718/w/