fix: sparkline sizing — use div wrapper instead of span in flex context

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
This commit is contained in:
Ricardo
2026-03-07 17:05:52 +01:00
parent 15b88b7087
commit 0da3780c77
8 changed files with 8 additions and 8 deletions

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Articles</h1>
{% set sparklineSvg = collections.articles | postingFrequency %} {% set sparklineSvg = collections.articles | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
{% set sparklineSvg = collections.posts | postingFrequency %} {% set sparklineSvg = collections.posts | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Bookmarks</h1>
{% set sparklineSvg = collections.bookmarks | postingFrequency %} {% set sparklineSvg = collections.bookmarks | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Likes</h1>
{% set sparklineSvg = collections.likes | postingFrequency %} {% set sparklineSvg = collections.likes | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
{% set sparklineSvg = collections.notes | postingFrequency %} {% set sparklineSvg = collections.notes | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Photos</h1>
{% set sparklineSvg = collections.photos | postingFrequency %} {% set sparklineSvg = collections.photos | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Replies</h1>
{% set sparklineSvg = collections.replies | postingFrequency %} {% set sparklineSvg = collections.replies | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

View File

@@ -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> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Reposts</h1>
{% set sparklineSvg = collections.reposts | postingFrequency %} {% set sparklineSvg = collections.reposts | postingFrequency %}
{% if sparklineSvg %} {% 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 %} {% endif %}
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">