client/src/App.scss

@@ -628,56 +628,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;
     }
+
+    .user-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
     }
 
-  ul {
+    .user-info {
-    padding: 0;
+      display: flex;
-    margin: 8px 0 0 20px;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
 
-    li {
+    .user-actions {
-      color: var(--luncher-text-secondary);
+      display: flex;
-      font-size: 0.9rem;
+      gap: 8px;
-      margin-bottom: 4px;
+      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);
+    display: inline-flex;
-    padding: 8px 12px;
-    border-radius: var(--luncher-radius-sm);
-    display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 6px;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
-    border-left: 3px solid var(--luncher-primary);
+    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);
+    color: var(--luncher-text-secondary);
-    font-weight: 500;
+    font-weight: 400;
   }
 }
 

client/src/App.tsx

@@ -544,12 +544,16 @@ function App() {
                                   const isBuyer = userPayload?.isBuyer || false;
                                   return <tr key={entry[0]}>
                                     <td>
+                                      <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();
@@ -575,10 +579,11 @@ function App() {
                                             doRemoveChoices(key as LunchChoice);
                                           }} className='action-icon' icon={faTrashCan} />
                                           </span>}
-                                    </td>
+                                        </div>
-                                    {userChoices?.length && food ? <td>
+                                      </div>
+                                      {userChoices && userChoices.length > 0 && food && (
                                         <div className="food-choices">
-                                        {userChoices?.map(foodIndex => {
+                                          {userChoices.map(foodIndex => {
                                             const restaurantKey = key as Restaurant;
                                             const foodName = food[restaurantKey]?.food?.[foodIndex].name;
                                             return <div key={foodIndex} className="food-choice-item">
@@ -592,7 +597,8 @@ function App() {
                                             </div>
                                           })}
                                         </div>
-                                    </td> : null}
+                                      )}
+                                    </td>
                                   </tr>
                                 }
                                 )}