Oprava hover popisků u Font Awesome ikon

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() }} />
     </>