feat(app-board): add mobile for triggering review dialog

Author: Aleksander Brylski

packages/game-app/src/gameView/components/TriggerReviewDialog/TriggerReviewDialog.styled.tsx

@@ -17,12 +17,18 @@ export const TriggerDialogContainer = styled(Dialog.DialogContainer)<{ showRevie
       left: 278px;
       bottom: 70px;
       transform: unset;
+      @media (max-width: ${({ theme }) => theme.mobile}) {
+        left: 0;
+      }
       :after {
          {
           content: '';
           position: absolute;
           bottom: -14px;
           left: 350px;
+          @media (max-width: ${({ theme }) => theme.mobile}) {
+            left: 170px;
+          }
           border-style: solid;
           border-width: 14px 14px 0;
           border-color: rgba(255, 255, 255, 0.6) transparent;

packages/game-app/src/gameView/components/TriggerReviewDialog/TriggerReviewDialog.tsx

@@ -5,6 +5,7 @@ import { TriggerDialogContainer } from './TriggerReviewDialog.styled';
 import { useDispatch } from 'react-redux';
 import { actions } from '../../slice';
 import ReviewPanel from '../ReviewPanel';
+import { useWindowDimensions } from '../../../_shared/components/utils';
 
 type Props = {
   isOpen: boolean;
@@ -14,6 +15,15 @@ type Props = {
 };
 
 const ReviewContainer: React.FC = () => {
+  const { width } = useWindowDimensions();
+  const isWindowTooSmall = width < 1100;
+  if (isWindowTooSmall) {
+    return (
+      <Box position="absolute" left={0} bottom={2}>
+        <ReviewPanel disabled />
+      </Box>
+    );
+  }
   return (
     <Box position="absolute" left={443} bottom={2}>
       <ReviewPanel disabled />