As a Query Service user I want to have decoded URLs displayed in my query results in order to easily read them.
**Problem:**
Currently when running a query on the Query Service ([[ https://query.wikidata.org/#select%20%2a%20%7B%20%3Fsl%20schema%3Aabout%20%3Fitem%20%7D%20limit%20200 | example ]]) some of the URLs displayed are very long and difficult for humans to read.
This ticket is to reduce the length of those URLs and make them more legible to humans by decoding them.
**Example:**
Decoding the displayed URL, so that a URL like:
```
<https://bg.wikiquote.org/wiki/%D0%92%D1%81%D0%B5%D0%BB%D0%B5%D0%BD%D0%B0_%E2%80%94_%D0%9A%D0%BE%D1%81%D0%BC%D0%BE%D1%81_%E2%80%94_%D0%A1%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%B5>
```
turns into
```
<https://bg.wikiquote.org/wiki/Вселена_—_Космос_—_Светове>
```
**Screenshots/mockups:**
Current display of URLs:
{F36354901}
**BDD**
GIVEN
AND
WHEN
AND
THEN
AND
**Acceptance criteria:**
[] URL results on the Query Service are decoded
**Open questions:**
Are there some special characters we don’t want to decode, e.g. RTL override?
Could an automatic <wbr> insertion cause issues?
**Original ticket**
>>! In T325075#8523739, @Nikki wrote:
>>>! In T325075#8519658, @Sarai-WMDE wrote:
>> 1. URLs are fixed sets of characters that won't wrap on their own. We should apply `word-break: break-word;` to the QS table in order to allow these long values to break into subsequent lines based on the available column space. This will prevent the list display to be triggered by the lack of horizontal space in this case.
>
> I would suggest decoding the displayed URL, so that a URL like
> ```<https://bg.wikiquote.org/wiki/%D0%92%D1%81%D0%B5%D0%BB%D0%B5%D0%BD%D0%B0_%E2%80%94_%D0%9A%D0%BE%D1%81%D0%BC%D0%BE%D1%81_%E2%80%94_%D0%A1%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%B5>```
> turns into
> ```<https://bg.wikiquote.org/wiki/Вселена_—_Космос_—_Светове>```
> (a third of the original length and actually legible to humans) and then use `<wbr>` at appropriate points in the URL (see https://css-tricks.com/better-line-breaks-for-long-urls/), e.g.
> ```<https:<wbr>//<wbr>bg<wbr>.<wbr>wikiquote<wbr>.<wbr>org<wbr>/<wbr>wiki/<wbr>Вселена<wbr>_<wbr>—<wbr>_<wbr>Космос<wbr>_<wbr>—<wbr>_<wbr>Светове>```
>
> Here's some HTML comparing the original, the original with `word-break: break-word`, the decoded URL, the decoded URL with `word-break: break-word` and the decoded URL with `<wbr>` that you can use to compare the behaviour (zooming in will make it easier): {F36190008}