Change detection widget with dynamic columns

internal/assets/templates/change-detection.html

@@ -1,17 +1,33 @@
 {{ template "widget-base.html" . }}
 
 {{ define "widget-content" }}
+{{ if ne .Style "dynamic-columns-experimental" }}
 <ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
     {{ range .ChangeDetections }}
     <li>
-        <a class="size-h4 block text-truncate color-highlight" href="{{ .URL }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
-        <ul class="list-horizontal-text">
-            <li {{ dynamicRelativeTimeAttrs .LastChanged }}></li>
-            <li class="shrink min-width-0"><a class="visited-indicator" href="{{ .DiffURL }}" target="_blank" rel="noreferrer">diff:{{ .PreviousHash }}</a></li>
-        </ul>
+        {{ template "change-detection" . }}
     </li>
     {{ else }}
     <li>No watches configured</li>
-    {{ end}}
+    {{ end }}
+</ul>
+{{ else }}
+<ul class="dynamic-columns">
+  {{ range .ChangeDetections }}
+  <li class="flex flex-column gap-5">
+    {{ template "change-detection" . }}
+  </li>
+  {{ else }}
+  <li>No watches configured</li>
+  {{ end }}
+</ul>
+{{ end }}
+{{ end }}
+
+{{ define "change-detection" }}
+<a class="size-h4 block text-truncate color-highlight" href="{{ .URL }}" target="_blank" rel="noreferrer">{{ .Title }}</a>
+<ul class="list-horizontal-text">
+  <li {{ dynamicRelativeTimeAttrs .LastChanged }}></li>
+  <li class="shrink min-width-0"><a class="visited-indicator" href="{{ .DiffURL }}" target="_blank" rel="noreferrer">diff:{{ .PreviousHash }}</a></li>
 </ul>
 {{ end }}

internal/widget/changedetection.go

@@ -17,6 +17,7 @@ type ChangeDetection struct {
 	Token            OptionalEnvString           `yaml:"token"`
 	Limit            int                         `yaml:"limit"`
 	CollapseAfter    int                         `yaml:"collapse-after"`
+	Style            string                      `yaml:"style"`
 }
 
 func (widget *ChangeDetection) Initialize() error {