Make link hitbox take up full width

This commit is contained in:
Svilen Markov 2025-03-30 14:53:59 +01:00
parent 0e0aca3844
commit d4d9e94f44

View File

@ -3,8 +3,7 @@
{{- define "widget-content" }} {{- define "widget-content" }}
<ul class="dynamic-columns list-gap-20 list-with-separator"> <ul class="dynamic-columns list-gap-20 list-with-separator">
{{- range .Containers }} {{- range .Containers }}
<li> <li class="docker-container flex items-center gap-15">
<a href="{{ .URL | safeURL }}" class="docker-container flex items-center gap-15" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">
<div class="shrink-0" data-popover-type="html" data-popover-position="above" data-popover-offset="0.25" data-popover-margin="0.1rem" data-popover-max-width="400px" aria-hidden="true"> <div class="shrink-0" data-popover-type="html" data-popover-position="above" data-popover-offset="0.25" data-popover-margin="0.1rem" data-popover-max-width="400px" aria-hidden="true">
<img class="docker-container-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy"> <img class="docker-container-icon{{ if .Icon.IsFlatIcon }} flat-icon{{ end }}" src="{{ .Icon.URL }}" alt="" loading="lazy">
<div data-popover-html> <div data-popover-html>
@ -23,9 +22,9 @@
</div> </div>
</div> </div>
<div class="min-width-0"> <div class="min-width-0 grow">
{{- if .URL }} {{- if .URL }}
<div class="color-highlight size-title-dynamic block text-truncate">{{ .Title }}</div> <a href="{{ .URL | safeURL }}" class="color-highlight size-title-dynamic block text-truncate" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
{{- else }} {{- else }}
<div class="color-highlight text-truncate size-title-dynamic">{{ .Title }}</div> <div class="color-highlight text-truncate size-title-dynamic">{{ .Title }}</div>
{{- end }} {{- end }}
@ -39,7 +38,6 @@
</div> </div>
<div class="visually-hidden" aria-label="{{ .StateText }}"></div> <div class="visually-hidden" aria-label="{{ .StateText }}"></div>
</a>
</li> </li>
{{- else }} {{- else }}
<div class="text-center">No containers available to show.</div> <div class="text-center">No containers available to show.</div>