From e404b8112dc1b26d1016788086fdd2e2ec2f0aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A1nek=20Pavel?= <pavel.stanek@marbes.cz>
Date: Wed, 4 Feb 2026 12:28:26 +0100
Subject: [PATCH] fix: opravy zobrazeni sekce vybranych jidel

---
 client/src/App.scss |  63 ++++++++++++++++++---------
 client/src/App.tsx  | 102 +++++++++++++++++++++++---------------------
 2 files changed, 96 insertions(+), 69 deletions(-)

diff --git a/client/src/App.scss b/client/src/App.scss
index c0049ff..33f5da7 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -621,56 +621,77 @@ input[type="text"], input[type="email"], input[type="password"] {
 
     tbody tr {
       transition: var(--luncher-transition);
+      border-bottom: 1px solid var(--luncher-border-light);
 
       &:hover {
         background: var(--luncher-bg-hover);
       }
 
-      &:last-child td {
+      &:last-child {
         border-bottom: none;
+        
+        td {
+          border-bottom: none;
+        }
       }
     }
 
     td {
       padding: 12px 16px;
-      border-color: var(--luncher-border-light);
+      border: none;
       color: var(--luncher-text);
-      white-space: nowrap;
       vertical-align: middle;
     }
-  }
 
-  ul {
-    padding: 0;
-    margin: 8px 0 0 20px;
+    .user-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
 
-    li {
-      color: var(--luncher-text-secondary);
-      font-size: 0.9rem;
-      margin-bottom: 4px;
+    .user-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .user-actions {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      white-space: nowrap;
     }
   }
 
   .food-choices {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 4px;
+    margin-top: 8px;
   }
 
   .food-choice-item {
-    background: var(--luncher-primary-light);
-    padding: 8px 12px;
-    border-radius: var(--luncher-radius-sm);
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    justify-content: space-between;
-    font-size: 0.9rem;
-    border-left: 3px solid var(--luncher-primary);
+    gap: 6px;
+    font-size: 0.85rem;
+    color: var(--luncher-text-secondary);
+
+    .action-icon {
+      opacity: 0;
+      transition: var(--luncher-transition);
+    }
+
+    &:hover .action-icon {
+      opacity: 1;
+    }
   }
 
   .food-choice-name {
-    color: var(--luncher-text);
-    font-weight: 500;
+    color: var(--luncher-text-secondary);
+    font-weight: 400;
   }
 }
 
diff --git a/client/src/App.tsx b/client/src/App.tsx
index ae32097..2cc2ca4 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -510,55 +510,61 @@ function App() {
                                   const isBuyer = userPayload?.isBuyer || false;
                                   return <tr key={entry[0]}>
                                     <td>
-                                      {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
-                                        <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
-                                      </span>}
-                                      <strong>{login}</strong>
-                                      {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
-                                      {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
-                                      {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
-                                        <FontAwesomeIcon onClick={() => {
-                                        markAsBuyer();
-                                      }} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
-                                      </span>}
-                                      {login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
-                                        <FontAwesomeIcon onClick={() => {
-                                        copyNote(userPayload.note!);
-                                      }} icon={faBasketShopping} className='buyer-icon' />
-                                      </span>}
-                                      {login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
-                                        <FontAwesomeIcon onClick={() => {
-                                        copyNote(userPayload.note!);
-                                      }} className='action-icon' icon={faComment} />
-                                      </span>}
-                                      {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
-                                        <FontAwesomeIcon onClick={() => {
-                                        setNoteModalOpen(true);
-                                      }} 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);
-                                      }} className='action-icon' icon={faTrashCan} />
-                                      </span>}
-                                    </td>
-                                    {userChoices?.length && food ? <td>
-                                      <div className="food-choices">
-                                        {userChoices?.map(foodIndex => {
-                                          const restaurantKey = key as Restaurant;
-                                          const foodName = food[restaurantKey]?.food?.[foodIndex].name;
-                                          return <div key={foodIndex} className="food-choice-item">
-                                            <span className="food-choice-name">{foodName}</span>
-                                            {login === auth.login && canChangeChoice &&
-                                            <span title={`Odstranit ${foodName}`}>
-                                              <FontAwesomeIcon onClick={() => {
-                                              doRemoveFoodChoice(restaurantKey, foodIndex);
-                                            }} className='action-icon' icon={faTrashCan} />
-                                            </span>}
-                                          </div>
-                                        })}
+                                      <div className="user-row">
+                                        <div className="user-info">
+                                          {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
+                                            <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
+                                          </span>}
+                                          <strong>{login}</strong>
+                                          {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
+                                          {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
+                                        </div>
+                                        <div className="user-actions">
+                                          {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            markAsBuyer();
+                                          }} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
+                                          </span>}
+                                          {login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            copyNote(userPayload.note!);
+                                          }} icon={faBasketShopping} className='buyer-icon' />
+                                          </span>}
+                                          {login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            copyNote(userPayload.note!);
+                                          }} className='action-icon' icon={faComment} />
+                                          </span>}
+                                          {login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
+                                            <FontAwesomeIcon onClick={() => {
+                                            setNoteModalOpen(true);
+                                          }} 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);
+                                          }} className='action-icon' icon={faTrashCan} />
+                                          </span>}
+                                        </div>
                                       </div>
-                                    </td> : null}
+                                      {userChoices && userChoices.length > 0 && food && (
+                                        <div className="food-choices">
+                                          {userChoices.map(foodIndex => {
+                                            const restaurantKey = key as Restaurant;
+                                            const foodName = food[restaurantKey]?.food?.[foodIndex].name;
+                                            return <div key={foodIndex} className="food-choice-item">
+                                              <span className="food-choice-name">{foodName}</span>
+                                              {login === auth.login && canChangeChoice &&
+                                              <span title={`Odstranit ${foodName}`}>
+                                                <FontAwesomeIcon onClick={() => {
+                                                doRemoveFoodChoice(restaurantKey, foodIndex);
+                                              }} className='action-icon' icon={faTrashCan} />
+                                              </span>}
+                                            </div>
+                                          })}
+                                        </div>
+                                      )}
+                                    </td>
                                   </tr>
                                 }
                                 )}