From 7407a3d8810f85666f3035c4b4a92c854da9976d Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Thu, 16 Oct 2025 08:06:22 +0200
Subject: [PATCH] =?UTF-8?q?Oprava=20hover=20popisk=C5=AF=20u=20Font=20Awes?=
 =?UTF-8?q?ome=20ikon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.tsx                      | 27 +++++++++++++++++--------
 client/src/components/PizzaOrderRow.tsx | 10 +++++----
 client/src/pages/StatsPage.tsx          |  8 ++++++--
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 237eb9c..335098f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -454,9 +454,13 @@ function App() {
           </Alert>
           {dayIndex != null &&
             <div className='day-navigator'>
-              <FontAwesomeIcon title="Předchozí den" icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
+              <span title='Předchozí den'>
+                <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer", visibility: dayIndex > 0 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex - 1)} />
+              </span>
               <h1 className='title' style={{ color: dayIndex === data.todayDayIndex ? 'black' : 'gray' }}>{data.date}</h1>
-              <FontAwesomeIcon title="Následující den" icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
+              <span title="Následující den">
+                <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer", visibility: dayIndex < 4 ? "initial" : "hidden" }} onClick={() => handleDayChange(dayIndex + 1)} />
+              </span>
             </div>
           }
           <Row className='food-tables'>
@@ -531,12 +535,16 @@ function App() {
                                       {login}
                                       {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
                                       {userPayload.note && <small style={{ overflowWrap: 'anywhere' }}> ({userPayload.note})</small>}
-                                      {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
+                                      {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
+                                        <FontAwesomeIcon onClick={() => {
                                         setNoteModalOpen(true);
-                                      }} title='Upravit poznámku' className='action-icon' icon={faNoteSticky} />}
-                                      {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
+                                      }} className='action-icon' icon={faNoteSticky} />
+                                      </span>}
+                                      {login === auth.login && canChangeChoice && <span title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`}>
+                                        <FontAwesomeIcon onClick={() => {
                                         doRemoveChoices(key as LunchChoice);
-                                      }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='action-icon' icon={faTrashCan} />}
+                                      }} className='action-icon' icon={faTrashCan} />
+                                      </span>}
                                     </td>
                                     {userChoices?.length && food ? <td>
                                       <ul>
@@ -545,9 +553,12 @@ function App() {
                                           const foodName = food[restaurantKey]?.food?.[foodIndex].name;
                                           return <li key={foodIndex}>
                                             {foodName}
-                                            {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
+                                            {login === auth.login && canChangeChoice &&
+                                            <span title={`Odstranit ${foodName}`}>
+                                              <FontAwesomeIcon onClick={() => {
                                               doRemoveFoodChoice(restaurantKey, foodIndex);
-                                            }} title={`Odstranit ${foodName}`} className='action-icon' icon={faTrashCan} />}
+                                            }} className='action-icon' icon={faTrashCan} />
+                                            </span>}
                                           </li>
                                         })}
                                       </ul>
diff --git a/client/src/components/PizzaOrderRow.tsx b/client/src/components/PizzaOrderRow.tsx
index 896e65a..f685005 100644
--- a/client/src/components/PizzaOrderRow.tsx
+++ b/client/src/components/PizzaOrderRow.tsx
@@ -28,9 +28,11 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
             <span key={pizzaOrder.name}>
                 {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
                 {auth?.login === order.customer && state === PizzaDayState.CREATED &&
-                    <FontAwesomeIcon onClick={() => {
-                        onDelete(pizzaOrder);
-                    }} title='Odstranit' className='action-icon' icon={faTrashCan} />
+                    <span title='Odstranit'>
+                        <FontAwesomeIcon onClick={() => {
+                            onDelete(pizzaOrder);
+                        }} className='action-icon' icon={faTrashCan} />
+                    </span>
                 }
             </span>)
             .reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
@@ -38,7 +40,7 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
         <td style={{ maxWidth: "200px" }}>{order.note ?? '-'}</td>
         <td style={{ maxWidth: "200px" }}>{order.fee?.price ? `${order.fee.price} Kč${order.fee.text ? ` (${order.fee.text})` : ''}` : '-'}</td>
         <td>
-            {order.totalPrice} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} title='Nastavit příplatek' className='action-icon' icon={faMoneyBill1} />}
+            {order.totalPrice} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <span title='Nastavit příplatek'><FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} className='action-icon' icon={faMoneyBill1} /></span>}
         </td>
         <PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setIsFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price?.toString() }} />
     </>
diff --git a/client/src/pages/StatsPage.tsx b/client/src/pages/StatsPage.tsx
index e202f89..33f83de 100644
--- a/client/src/pages/StatsPage.tsx
+++ b/client/src/pages/StatsPage.tsx
@@ -107,9 +107,13 @@ export default function StatsPage() {
       <div className="stats-page">
         <h1>Statistiky</h1>
         <div className="week-navigator">
-          <FontAwesomeIcon title="Předchozí týden" icon={faChevronLeft} style={{ cursor: "pointer" }} onClick={handlePreviousWeek} />
+          <span title="Předchozí týden">
+            <FontAwesomeIcon icon={faChevronLeft} style={{ cursor: "pointer" }} onClick={handlePreviousWeek} />
+          </span>
           <h2 className="date-range">{getHumanDate(dateRange[0])} - {getHumanDate(dateRange[1])}</h2>
-          <FontAwesomeIcon title="Následující týden" icon={faChevronRight} style={{ cursor: "pointer" }} onClick={handleNextWeek} />
+          <span title="Následující týden">
+            <FontAwesomeIcon icon={faChevronRight} style={{ cursor: "pointer" }} onClick={handleNextWeek} />
+          </span>
         </div>
         <LineChart width={CHART_WIDTH} height={CHART_HEIGHT} data={data}>
           {Object.values(LunchChoice).map(location => renderLine(location))}