Responzivní design

client/src/App.css

@@ -47,15 +47,9 @@
 }
 
 .food-tables {
-  display: flex;
-  justify-content: space-evenly;
   margin-bottom: 50px;
 }
 
-.food-table {
-  max-width: 500px;
-}
-
 .content-wrapper {
   width: 100%;
   display: flex;

client/src/App.tsx

@@ -6,7 +6,7 @@ import { useAuth } from './context/auth';
 import Login from './Login';
 import { Locations, ClientData } from './Types';
 import './App.css';
-import { Alert, Form, Table } from 'react-bootstrap';
+import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
 
 const EVENT_CONNECT = "connect"
 
@@ -62,7 +62,7 @@ function App() {
   }
 
   const renderFoodTable = (name, food) => {
-    return <div className='food-table'>
+    return <Col md={12} lg={4}>
       <h3>{name}</h3>
       <Table striped bordered hover>
         <tbody>
@@ -75,7 +75,7 @@ function App() {
           )}
         </tbody>
       </Table>
-    </div>
+    </Col>
   }
 
   if (!auth || !auth.login) {
@@ -95,11 +95,11 @@ function App() {
         <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
       </Alert>
       <h1 className='title'>Dnes je {data.date}</h1>
-      <div className='food-tables'>
+      <Row className='food-tables'>
         {renderFoodTable('Sladovnická', food.sladovnicka)}
         {renderFoodTable('U Motlíků', food["uMotliku:"])}
         {renderFoodTable('TechTower', food.techTower)}
-      </div>
+      </Row>
       <div className='content-wrapper'>
         <div className='content'>
           <p>Jak to dnes vidíš s obědem?</p>