Update forum post templates

* Use approx number for points & comments
* Hide comments when limited on horizontal space
* Abbreviate "points" to "pts" when limited on horizontal space
* Don't let domain wrap

internal/glance/static/main.css

@@ -804,7 +804,7 @@ details[open] .summary::after {
 .list-horizontal-text > *:not(:last-child)::after {
     content: '•';
     color: var(--color-text-subdue);
-    margin: 0 0.5rem;
+    margin: 0 0.4rem;
     position: relative;
     top: 0.1rem;
 }
@@ -1023,11 +1023,6 @@ details[open] .summary::after {
     display: none;
 }
 
-.forum-post-list-item {
-    display: flex;
-    gap: 1.2rem;
-}
-
 .forum-post-list-thumbnail {
     flex-shrink: 0;
     width: 6rem;
@@ -1042,6 +1037,21 @@ details[open] .summary::after {
     transform: translateY(-0.15rem);
 }
 
+@container widget (max-width: 550px) {
+    .forum-post-comment-count {
+        display: none;
+    }
+
+    .forum-post-points-word {
+        font-size: 0;
+    }
+
+    .forum-post-points-word::after {
+        content: "pts";
+        font-size: var(--font-size-base);
+    }
+}
+
 .bookmarks-group {
     --bookmarks-group-color: var(--color-primary);
 }

internal/glance/templates.go

@@ -1,7 +1,6 @@
 package glance
 
 import (
-	"fmt"
 	"html/template"
 	"math"
 	"strconv"
@@ -14,8 +13,8 @@ import (
 var intl = message.NewPrinter(language.English)
 
 var globalTemplateFunctions = template.FuncMap{
-	"formatViewerCount": formatViewerCount,
-	"formatNumber":      intl.Sprint,
+	"formatApproxNumber": formatApproxNumber,
+	"formatNumber":       intl.Sprint,
 	"safeCSS": func(str string) template.CSS {
 		return template.CSS(str)
 	},
@@ -45,18 +44,18 @@ func mustParseTemplate(primary string, dependencies ...string) *template.Templat
 	return t
 }
 
-func formatViewerCount(count int) string {
+func formatApproxNumber(count int) string {
 	if count < 1_000 {
 		return strconv.Itoa(count)
 	}
 
 	if count < 10_000 {
-		return fmt.Sprintf("%.1fk", float64(count)/1_000)
+		return strconv.FormatFloat(float64(count)/1_000, 'f', 1, 64) + "k"
 	}
 
 	if count < 1_000_000 {
-		return fmt.Sprintf("%dk", count/1_000)
+		return strconv.Itoa(count/1_000) + "k"
 	}
 
-	return fmt.Sprintf("%.1fm", float64(count)/1_000_000)
+	return strconv.FormatFloat(float64(count)/1_000_000, 'f', 1, 64) + "m"
 }

internal/glance/templates/dns-stats.html

@@ -18,7 +18,7 @@
         </div>
         {{ else }}
         <div class="cursor-help" data-popover-type="text" data-popover-text="Total number of blocked domains from all adlists" data-popover-max-width="200px" data-popover-text-align="center">
-            <div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatViewerCount }}</div>
+            <div class="color-highlight size-h3">{{ .Stats.DomainsBlocked | formatApproxNumber }}</div>
             <div class="size-h6">DOMAINS</div>
         </div>
         {{ end }}

internal/glance/templates/forum-posts.html

@@ -33,10 +33,10 @@
                     </ul>
                 </div>
                 {{ end }}
-                <ul class="list-horizontal-text">
+                <ul class="list-horizontal-text flex-nowrap text-compact">
                     <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
-                    <li>{{ .Score | formatNumber }} points</li>
-                    <li>{{ .CommentCount | formatNumber }} comments</li>
+                    <li class="shrink-0">{{ .Score | formatApproxNumber }} <span class="forum-post-points-word">points</span></li>
+                    <li class="forum-post-comment-count shrink-0">{{ .CommentCount | formatApproxNumber }} comments</li>
                     {{ if ne "" .TargetUrl }}
                     <li class="min-width-0"><a class="visited-indicator text-truncate block" href="{{ .TargetUrl }}" target="_blank" rel="noreferrer">{{ .TargetUrlDomain }}</a></li>
                     {{ end }}

internal/glance/templates/reddit-horizontal-cards.html

@@ -21,7 +21,7 @@
                 <a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7 margin-bottom-auto" target="_blank" rel="noreferrer">{{ .Title }}</a>
                 <ul class="list-horizontal-text margin-top-7">
                     <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
-                    <li>{{ .Score | formatNumber }} points</li>
+                    <li>{{ .Score | formatApproxNumber }} points</li>
                 </ul>
             </div>
         </div>

internal/glance/templates/reddit-vertical-cards.html

@@ -20,7 +20,7 @@
             <a href="{{ .DiscussionUrl }}" class="text-truncate-3-lines color-primary-if-not-visited margin-top-7" target="_blank" rel="noreferrer">{{ .Title }}</a>
             <ul class="list-horizontal-text margin-top-7">
                 <li {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
-                <li>{{ .Score | formatNumber }} points</li>
+                <li>{{ .Score | formatApproxNumber }} points</li>
             </ul>
         </div>
     </div>

internal/glance/templates/twitch-channels.html

@@ -31,7 +31,7 @@
                         {{ end }}
                     <ul class="list-horizontal-text">
                         <li {{ dynamicRelativeTimeAttrs .LiveSince }}></li>
-                        <li>{{ .ViewersCount | formatViewerCount }} viewers</li>
+                        <li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
                     </ul>
                     {{ else }}
                     <div>Offline</div>

internal/glance/templates/twitch-games-list.html

@@ -9,7 +9,7 @@
             <div class="min-width-0">
                 <a class="size-h3 color-highlight text-truncate block" href="https://www.twitch.tv/directory/category/{{ .Slug }}" target="_blank" rel="noreferrer">{{ .Name }}</a>
                 <ul class="list-horizontal-text">
-                    <li>{{ .ViewersCount | formatViewerCount }} viewers</li>
+                    <li>{{ .ViewersCount | formatApproxNumber }} viewers</li>
                     {{ if .IsNew }}
                     <li class="color-primary">NEW</li>
                     {{ end }}