M frontend/containers/TravelColumns/AddTravel.tsx → frontend/containers/TravelColumns/AddTravel.tsx

@@ -1,7 +1,8 @@ 
 import React from 'react';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
-import {makeStyles} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import {useTheme, makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 import clsx from 'clsx';
 
@@ -13,10 +14,16 @@ const AddTravel = (props: Props) => {
   const {toggle} = props;
   const classes = useStyles();
   const {t} = useTranslation();
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.up('sm'));
+  let containerClasses = [classes.container]
+  if (matches) {
+    containerClasses = [...containerClasses, 'tour_travel_add']
+  }
   return (
     <Container
       maxWidth="sm"
-      className={clsx([classes.container, 'tour_travel_add'])}
+      className={clsx(containerClasses)}
     >
       <Button
         classes={{containedSecondary: classes.button}}

M frontend/pages/e/[uuid].tsx → frontend/pages/e/[uuid].tsx

@@ -1,6 +1,6 @@ 
 import {useState, useReducer, useEffect} from 'react';
 import Box from '@material-ui/core/Box';
-import {makeStyles} from '@material-ui/core/styles';
+import {makeStyles, useTheme} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 import {initializeApollo} from '../../lib/apolloClient';
 import useToastStore from '../../stores/useToastStore';
@@ -25,6 +25,7 @@ } from '../../generated/graphql';
 import ErrorPage from '../_error';
 import useProfile from '../../hooks/useProfile';
 import Fab from '../../containers/Fab';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 const POLL_INTERVAL = 10000;
 
@@ -43,6 +44,7 @@ 
 const Event = (props: Props) => {
   const {eventUUID} = props;
   const classes = useStyles();
+  const theme = useTheme();
   const {t} = useTranslation();
   const {user} = useProfile();
   const {
@@ -61,7 +63,9 @@ const {data: {eventByUUID: event} = {}} = useEventByUuidQuery({
     pollInterval: POLL_INTERVAL,
     variables: {uuid: eventUUID},
   });
-
+  const matches = useMediaQuery(theme.breakpoints.down('sm'));
+  const addCarClasses = matches ? 'tour_travel_add' : '';
+  
   useEffect(() => {
     if (event) setEvent(event as EventType);
   }, [event]);
@@ -122,6 +126,7 @@ <Fab
           onClick={addTravelClickHandler}
           aria-label="add-car"
           color="primary"
+          className={addCarClasses}
         >
           {t('travel.creation.title')}
         </Fab>