Zpřehlednění tabulky výběru

client/src/App.css

@@ -67,10 +67,29 @@
   justify-content: flex-end;
 }
 
-.trash-icon {
+.table {
+  margin-bottom: 0;
+}
+
+.table> :not(caption) .trash-icon {
   color: rgb(0, 89, 255);
   cursor: pointer;
   margin-left: 10px;
+  padding: 0;
+}
+
+.table ul {
+  padding: 0;
+  margin-left: 20px;
+  margin-bottom: 0;
+}
+
+.table td {
+  vertical-align: top;
+}
+
+.table>tbody>tr>td>table>tbody>tr>td {
+  border: none;
 }
 
 .qr-code {

client/src/App.tsx

@@ -257,7 +257,7 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Ne.</li>
+              <li>Přehlednější zobrazení tabulky</li>
             </ul>
           </Alert>
           <h1 className='title'>Dnes je {data.date}</h1>
@@ -287,7 +287,7 @@ function App() {
                 </Form.Select>
               </>}
               {Object.keys(data.choices).length > 0 ?
-                <Table striped bordered hover className='results-table mt-5'>
+                <Table bordered className='mt-5'>
                   <tbody>
                     {Object.keys(data.choices).map((locationKey: string) => {
                       const locationName = Object.values(Locations)[Number(locationKey)];
@@ -295,15 +295,21 @@ function App() {
                       return (
                         <tr key={locationKey}>
                           <td>{locationName}</td>
-                          <td>
+                          <td className='p-0'>
-                            <ul>
+                            <Table>
+                              <tbody>
                                 {locationLoginList.map((entry: [string, number[]], index) => {
                                   const login = entry[0];
                                   const userChoices = entry[1];
-                                return <li key={index}>{login} {login === auth.login && <FontAwesomeIcon onClick={() => {
+                                  return <tr key={index}>
+                                    <td className='text-nowrap'>
+                                      {login}
+                                      {login === auth.login && <FontAwesomeIcon onClick={() => {
                                         doRemoveChoices(locationKey);
-                                }} title='Odstranit, včetně případných podřízených jídel' className='trash-icon' icon={faTrashCan} />}
+                                      }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='trash-icon' icon={faTrashCan} />}
-                                  {userChoices?.length && food ? <ul>
+                                    </td>
+                                    {userChoices?.length && food ? <td className='w-100'>
+                                      <ul>
                                         {userChoices.map(foodIndex => {
                                           const locationsKey = Object.keys(Locations)[Number(locationKey)]
                                           const restaurantKey = Object.keys(Restaurants).indexOf(locationsKey);
@@ -316,11 +322,13 @@ function App() {
                                             }} title={`Odstranit ${foodName}`} className='trash-icon' icon={faTrashCan} />}
                                           </li>
                                         })}
-                                  </ul> : null}
+                                      </ul>
-                                </li>
+                                    </td> : null}
+                                  </tr>
                                 }
                                 )}
-                            </ul>
+                              </tbody>
+                            </Table>
                           </td>
                         </tr>)
                     }