From 0da3780c77ce871d15dbc7428c01bab9a4b15cbd Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 17:05:52 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20sparkline=20sizing=20=E2=80=94=20use=20d?=
 =?UTF-8?q?iv=20wrapper=20instead=20of=20span=20in=20flex=20context?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sparkline SVG containers were using <span> elements as flex items.
While a span's outer display is blockified in flex context, its inner
display remains inline, causing SVG width:100% to resolve against the
inline content width (~22px) instead of the flex-allocated width (~670px).
Switching to <div> provides block inner display, allowing the SVG to
fill the available space correctly.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 articles.njk  | 2 +-
 blog.njk      | 2 +-
 bookmarks.njk | 2 +-
 likes.njk     | 2 +-
 notes.njk     | 2 +-
 photos.njk    | 2 +-
 replies.njk   | 2 +-
 reposts.njk   | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/articles.njk b/articles.njk
index fa1aff4..fa40d12 100644
--- a/articles.njk
+++ b/articles.njk
@@ -14,7 +14,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Articles</h1>
     {% set sparklineSvg = collections.articles | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/blog.njk b/blog.njk
index 3656bea..d761cb4 100644
--- a/blog.njk
+++ b/blog.njk
@@ -13,7 +13,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
     {% set sparklineSvg = collections.posts | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/bookmarks.njk b/bookmarks.njk
index 7374d95..44fd6c4 100644
--- a/bookmarks.njk
+++ b/bookmarks.njk
@@ -14,7 +14,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Bookmarks</h1>
     {% set sparklineSvg = collections.bookmarks | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/likes.njk b/likes.njk
index ac001e8..589be0e 100644
--- a/likes.njk
+++ b/likes.njk
@@ -14,7 +14,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Likes</h1>
     {% set sparklineSvg = collections.likes | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/notes.njk b/notes.njk
index 01f9e89..f7bca29 100644
--- a/notes.njk
+++ b/notes.njk
@@ -14,7 +14,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
     {% set sparklineSvg = collections.notes | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/photos.njk b/photos.njk
index e74919b..3e5bbb4 100644
--- a/photos.njk
+++ b/photos.njk
@@ -14,7 +14,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Photos</h1>
     {% set sparklineSvg = collections.photos | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/replies.njk b/replies.njk
index 0717ee0..d010daf 100644
--- a/replies.njk
+++ b/replies.njk
@@ -14,7 +14,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Replies</h1>
     {% set sparklineSvg = collections.replies | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/reposts.njk b/reposts.njk
index 07c6585..6098633 100644
--- a/reposts.njk
+++ b/reposts.njk
@@ -14,7 +14,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Reposts</h1>
     {% set sparklineSvg = collections.reposts | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    <div class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</div>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">