Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/_includes/system-override.njk
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
<button onclick="triggerSecretUnlock('matrix')" class="override-btn py-1.5 bg-green-500/5 hover:bg-green-500/20 text-green-500 text-[8px] border border-green-500/20 rounded transition-all">
MATRIX
</button>
<button onclick="triggerSecretUnlock('pulse')" class="override-btn py-1.5 bg-orange-500/5 hover:bg-orange-500/20 text-orange-400 text-[8px] border border-orange-500/20 rounded transition-all">
PULSE
</button>
Comment on lines +20 to +22

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

📐 Layout Alignment Issue

Adding the PULSE button increases the number of small buttons to 5. In the current 3-column grid layout (grid-cols-3), this causes the larger Force Surge button to be positioned in the same row as MATRIX and PULSE (Row 2, Column 3).

The Problem:

  • Height Mismatch: Because CSS Grid items stretch to match the row height by default, the smaller MATRIX and PULSE buttons will stretch vertically to match the taller Force Surge button.
  • Visual Inconsistency: This makes Row 2 significantly taller than Row 1, leading to an uneven and misaligned layout.

Recommended Solution:

Update the Force Surge button (lines 23-27) to span all 3 columns using col-span-3. This will cleanly push it to its own row at the bottom, keeping the small buttons perfectly aligned and consistent in height.

<button onclick="triggerForceSurge()"
    class="col-span-3 relative overflow-hidden py-2 px-6 bg-blue-600/20 text-blue-300 border-2 border-blue-400 rounded-lg font-bold tracking-[0.2em] transition-all hover:bg-blue-500/40 hover:shadow-[0_0_30px_rgba(59,130,246,0.6)] animate-pulse uppercase">
    ...
</button>

<button onclick="triggerForceSurge()"
class="relative overflow-hidden py-2 px-6 bg-blue-600/20 text-blue-300 border-2 border-blue-400 rounded-lg font-bold tracking-[0.2em] transition-all hover:bg-blue-500/40 hover:shadow-[0_0_30px_rgba(59,130,246,0.6)] animate-pulse uppercase">
<span class="relative z-10">Force Surge</span>
Expand Down
Loading