#1 - Design web, looks good

packages/components/src/App.web.tsx

@@ -5,15 +5,18 @@ import { Provider } from 'react-redux'
 
 import { store } from './store'
 import Reviews from './features/reviews/Reviews'
+import { useMediaQuery } from 'react-responsive'
 
 type Props = {
   children: React.ReactNode
 }
 
 const App = ({ children }: Props) => {
+  const isMobile = useMediaQuery({ maxWidth: 900 })
+
   return (
     <Provider store={store}>
-      <View style={styles.main}>
+      <View style={[styles.main, isMobile ? mobileStyles.main : {}]}>
         <View style={styles.side} />
         <View style={styles.pageContainer}>{children}</View>
         <View style={styles.side} />
@@ -26,6 +29,7 @@ const styles = StyleSheet.create({
   main: {
     backgroundColor: '#f1f1f1',
     flexDirection: 'row',
+    height: '100vh',
   },
   pageContainer: {
     flex: 2,
@@ -35,4 +39,10 @@ const styles = StyleSheet.create({
   },
 })
 
+const mobileStyles = StyleSheet.create({
+  main: {
+    flexDirection: 'column',
+  },
+})
+
 export default App