feat: enhance bug label styling in web UI

Amolith and Crush created 2 weeks ago

Add CSS styling for bug labels with proper borders and background
colors. Update the bug template to use styled labels instead of
plain code elements.

Co-Authored-By: Crush <[e-mail]>

Change summary

pkg/web/static/overrides.css | 12 ++++++++++++
pkg/web/templates/bug.html   |  2 +-
2 files changed, 13 insertions(+), 1 deletion(-)

Detailed changes

pkg/web/static/overrides.css

@@ -172,3 +172,15 @@ article > header > p {
 article > p:only-child {
 	margin-bottom: 0;
 }
+
+.bug-label {
+	display: inline-block;
+	padding: 0.25rem 0.5rem;
+	font-size: 0.875rem;
+	font-weight: 600;
+	line-height: 1;
+	border-radius: 0.25rem;
+	background-color: color-mix(in srgb, var(--label-color) 20%, var(--pico-card-background-color));
+	border: 2px solid color-mix(in srgb, var(--label-color) 40%, var(--pico-card-background-color));
+	color: var(--pico-color);
+}

pkg/web/templates/bug.html

@@ -23,7 +23,7 @@
   </h2>
   {{if .Labels}}
   <p>
-    {{range $i, $label := .Labels}}{{if $i}} {{end}}<code>{{$label.Name}}</code>{{end}}
+    {{range $i, $label := .Labels}}{{if $i}} {{end}}<span class="bug-label" style="--label-color: {{$label.Color}}">{{$label.Name}}</span>{{end}}
   </p>
   {{end}}
 </header>