Changeset e9cfa3c in Klonkt

Timestamp:

06/19/2026 07:26:39 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

9b3e12c

Parents:

6b8afb1

Message:

fix: stats chart overflowed the card at 90 days

90 day columns + all date labels didn't fit → overflow to the right outside the card.
Now: columns shrink (flex 1 1 0 + min-width:0), chart overflow:hidden within the
card, and date labels thinned out (14d every one, 30d every 4th, 90d every 10th).

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/admin-stats.ejs (modified) (3 diffs)

src/views/pages/admin-stats.ejs

@@ -35 +35 @@
     </div>
     <div class="stats-chart">
-      <% s.series.forEach(function(d){
+      <% var _step = s.days <= 14 ? 1 : (s.days <= 31 ? 4 : 10);
+         s.series.forEach(function(d, i){
            var pvPct = Math.round(d.pageviews / _max * 100);
            var visPct = Math.round(d.visitors / _max * 100);
@@ -44 +45 @@
             <span class="sc-vis" style="height: <%= visPct %>%"></span>
           </div>
-          <span class="sc-day"><%= d.day.slice(8) %></span>
+          <span class="sc-day"><%= (i % _step === 0) ? d.day.slice(8) : '' %></span>
         </div>
       <% }); %>
@@ -116 +117 @@
 .lg-vis::before { background: var(--accent); }
 .lg-pv::before { background: color-mix(in srgb, var(--accent) 28%, transparent); }
-.stats-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; margin-top: 1rem; }
-.sc-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
-.sc-bar { position: relative; width: 70%; max-width: 26px; height: 140px; display: flex; align-items: flex-end; }
+.stats-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 1rem; overflow: hidden; }
+.sc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
+.sc-bar { position: relative; width: 70%; max-width: 26px; min-width: 2px; height: 140px; display: flex; align-items: flex-end; }
+.sc-day { white-space: nowrap; }
 .sc-pv, .sc-vis { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
 .sc-pv { background: color-mix(in srgb, var(--accent) 28%, transparent); }