fix: place history chart in right grid column of expanded row (#7)

The dl + button + chart were 3 direct children of .player-detail (a
2-column grid). Auto-placement put the button in the right column,
forcing the chart to wrap to a second row in the left column.
Wrap dl + button in .player-detail-left so the chart occupies col 2.
This commit is contained in:
Samuel Enocsson
2026-05-21 15:23:53 +02:00
parent 259a3fadf1
commit 88df98f269
+29 -27
View File
@@ -4,33 +4,35 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
%> %>
<div class="player-detail"> <div class="player-detail">
<% if (hasPlayer) { %> <% if (hasPlayer) { %>
<dl class="detail-grid"> <div class="player-detail-left">
<div> <dl class="detail-grid">
<dt>Current rating</dt> <div>
<dd><%= player.rating ?? '—' %></dd> <dt>Current rating</dt>
</div> <dd><%= player.rating ?? '—' %></dd>
<div> </div>
<dt>Last month</dt> <div>
<dd><%= player.lastMonthRating ?? '—' %></dd> <dt>Last month</dt>
</div> <dd><%= player.lastMonthRating ?? '—' %></dd>
<div> </div>
<dt>Change vs last month</dt> <div>
<dd> <dt>Change vs last month</dt>
<% if (player.ratingChange != null) { %><%- include('delta-pill', { value: player.ratingChange }) %><% } else { %>—<% } %> <dd>
</dd> <% if (player.ratingChange != null) { %><%- include('delta-pill', { value: player.ratingChange }) %><% } else { %>—<% } %>
</div> </dd>
<div> </div>
<dt>Predicted next update</dt> <div>
<dd><%= player.predictedRating ?? '—' %></dd> <dt>Predicted next update</dt>
</div> <dd><%= player.predictedRating ?? '—' %></dd>
<div> </div>
<dt>Gap to predicted</dt> <div>
<dd> <dt>Gap to predicted</dt>
<% if (player.deltaPredicted != null) { %><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %><% } else { %>—<% } %> <dd>
</dd> <% if (player.deltaPredicted != null) { %><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %><% } else { %>—<% } %>
</div> </dd>
</dl> </div>
<button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button> </dl>
<button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button>
</div>
<% } %> <% } %>
<% if (history && history.length > 0) { %> <% if (history && history.length > 0) { %>