fix(ui): allow label descriptions to wrap in dropdown (#11607)

https://codeberg.org/forgejo/forgejo/issues/11512

Restoring default whitespace behaviour seems sufficient to resolve this. The `display: block` property is necessary because `<small>` is an inline element and otherwise the `padding-left` only applies to the first line. There's a description in one of the default label packages affected by the issue so I've used that for the before/after screenshots below.

| Before | After |
|-|-|
| ![Screenshot 2026-03-10 at 07-09-23 #1 - r - henrycatalinismith_test3 - Forgejo Beyond coding. We Forge](/attachments/2c361f11-d71a-464e-8d4a-0aaa97199d39) | ![Screenshot 2026-03-10 at 07-08-01 #1 - r - henrycatalinismith_test3 - Forgejo Beyond coding. We Forge](/attachments/7a570f99-8687-43d9-8376-98907961bfcf) |

The issue doesn't just affect long descriptions though. In fact even the nice, short defaults are affected. Vision impairment is one of the most common disabilities, and increasing the text size is a typical way in which people adapt their computing environment to accommodate their disability. Even the short default label descriptions are cut off in this use case.

| Before | After |
|-|-|
| ![Screenshot 2026-03-10 at 06-58-29 New issue - henrycatalinismith_test2 - Forgejo Beyond coding. We Forge](/attachments/741ac088-64ac-49d3-9962-c20905c7750c) | ![Screenshot 2026-03-10 at 06-59-00 New issue - henrycatalinismith_test2 - Forgejo Beyond coding. We Forge](/attachments/73f1dc1e-242c-4697-8e9d-1288088a2d8c) |

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11607
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Henry Catalini Smith <henry@catalinismith.se>
Co-committed-by: Henry Catalini Smith <henry@catalinismith.se>
This commit is contained in:
Henry Catalini Smith 2026-03-20 18:55:27 +01:00 committed by 0ko
parent 1127aca2d2
commit 181ba05eed
2 changed files with 5 additions and 2 deletions

View file

@ -22,7 +22,7 @@
{{end}}
{{$previousExclusiveScope = $exclusiveScope}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel ctx .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
{{if .Description}}<small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
</a>
{{end}}
@ -35,7 +35,7 @@
{{end}}
{{$previousExclusiveScope = $exclusiveScope}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel ctx .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
{{if .Description}}<small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
</a>
{{end}}

View file

@ -116,6 +116,9 @@
.repository .select-label .desc {
padding-left: 23px;
white-space: normal;
display: block;
margin-top: 2px;
}
/* For the secondary pointing menu, respect its own border-bottom */