From 6991375afce4dabed9307337345e82ad0c2e7792 Mon Sep 17 00:00:00 2001
From: robert <robert@myemail.cloud>
Date: Mon, 6 Jul 2026 22:13:31 -0400
Subject: [PATCH] Move Crit button inline with HP controls; fix death save
 button icon alignment

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/App.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index f871e2d..671f20d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1474,11 +1474,6 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                         />
                       </span>
                       <span>HP: {p.currentHp}/{p.maxHp}</span>
-                      {hasDeathSaves && (participantStatus === 'dying' || participantStatus === 'stable') && encounter.isStarted && (
-                        <button onClick={() => handleCritDamage(p.id)} className="ml-auto px-2 py-0.5 text-xs rounded bg-red-900 hover:bg-red-800 text-red-100 border border-red-700" title="Critical hit at 0 HP: +2 death-save failures">
-                          <Crosshair size={12} className="inline mr-1" />Crit
-                        </button>
-                      )}
                     </div>
                     
                     {participantStatus === 'dead' && (
@@ -1521,19 +1516,19 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                               ))}
                             </div>
                             <div className="flex gap-2 mt-1">
-                              <button onClick={() => handleDeathSaveChange(p.id, 'success')} className="px-2 py-1 text-xs rounded bg-emerald-700 hover:bg-emerald-600 text-white" title="Death save success">
+                              <button onClick={() => handleDeathSaveChange(p.id, 'success')} className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded bg-emerald-700 hover:bg-emerald-600 text-white" title="Death save success">
                                 Success
                               </button>
-                              <button onClick={() => handleDeathSaveChange(p.id, 'fail')} className="px-2 py-1 text-xs rounded bg-red-700 hover:bg-red-600 text-white" title="Death save failure">
+                              <button onClick={() => handleDeathSaveChange(p.id, 'fail')} className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded bg-red-700 hover:bg-red-600 text-white" title="Death save failure">
                                 Fail
                               </button>
-                              <button onClick={() => handleNat1(p.id)} className="px-2 py-1 text-xs rounded bg-red-800 hover:bg-red-700 text-white" title="Natural 1: +2 failures">
+                              <button onClick={() => handleNat1(p.id)} className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded bg-red-800 hover:bg-red-700 text-white" title="Natural 1: +2 failures">
                                 <AlertTriangle size={12} /> Nat1
                               </button>
-                              <button onClick={() => handleNat20(p.id)} className="px-2 py-1 text-xs rounded bg-yellow-600 hover:bg-yellow-500 text-white" title="Natural 20: 1 HP + conscious">
+                              <button onClick={() => handleNat20(p.id)} className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded bg-yellow-600 hover:bg-yellow-500 text-white" title="Natural 20: 1 HP + conscious">
                                 <Zap size={12} /> Nat20
                               </button>
-                              <button onClick={() => handleStabilize(p.id)} className="px-2 py-1 text-xs rounded bg-emerald-700 hover:bg-emerald-600 text-white" title="Stabilize at 0 HP">
+                              <button onClick={() => handleStabilize(p.id)} className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded bg-emerald-700 hover:bg-emerald-600 text-white" title="Stabilize at 0 HP">
                                 <HeartPulse size={12} /> Stabilize
                               </button>
                             </div>
@@ -1617,6 +1612,11 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                 </div>
 
                 <div className="flex flex-wrap items-center space-x-2 mt-2 sm:mt-0">
+                  {hasDeathSaves && (participantStatus === 'dying' || participantStatus === 'stable') && encounter.isStarted && (
+                    <button onClick={() => handleCritDamage(p.id)} className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded bg-red-900 hover:bg-red-800 text-red-100 border border-red-700" title="Critical hit at 0 HP: +2 death-save failures">
+                      <Crosshair size={12} />Crit
+                    </button>
+                  )}
                   {encounter.isStarted && (
                     <div className="flex items-center space-x-1 bg-stone-800 p-1 rounded-md">
                       <input