From 2ba417fa5f43ef2f679ae9464f68cbe28f8e1c2e Mon Sep 17 00:00:00 2001
From: Viktor Riabkov <vriabkov@scnsoft.com>
Date: Thu, 4 Apr 2024 15:42:06 +0800
Subject: [PATCH] Fix mobile version of matrix grid

---
 src/entities/activity/ui/items/Matrix/MatrixCell.tsx        | 2 ++
 .../items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx   | 6 +++++-
 .../ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx  | 2 +-
 .../ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx  | 2 +-
 .../ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx    | 2 +-
 src/shared/ui/Items/SelectBase/SelectBaseBox.tsx            | 3 ++-
 6 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/entities/activity/ui/items/Matrix/MatrixCell.tsx b/src/entities/activity/ui/items/Matrix/MatrixCell.tsx
index 69e8ff645..0e28b475d 100644
--- a/src/entities/activity/ui/items/Matrix/MatrixCell.tsx
+++ b/src/entities/activity/ui/items/Matrix/MatrixCell.tsx
@@ -15,6 +15,7 @@ export const MatrixCell = ({ children, isRowLabel }: Props) => {
 
   return (
     <Box
+      display="flex"
       height={lessThanTarget ? '100px' : '112px'}
       padding={lessThanTarget ? '8px' : '14px'}
       justifyContent="center"
@@ -22,6 +23,7 @@ export const MatrixCell = ({ children, isRowLabel }: Props) => {
       width={isRowLabel ? rowLabelWidth : '100%'}
       minWidth={lessThanTarget ? '70px' : '142px'}
       maxWidth="400px"
+      data-testid="matrix-cell"
     >
       {children}
     </Box>
diff --git a/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx b/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx
index dd0516db1..8a2898c79 100644
--- a/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx
+++ b/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxButton.tsx
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import { MatrixCell } from '../MatrixCell';
 
 import { CheckboxItem, SelectBaseBox } from '~/shared/ui';
+import { useCustomMediaQuery } from '~/shared/utils';
 
 type Props = {
   id: string;
@@ -13,14 +14,17 @@ type Props = {
 };
 
 export const CheckboxButton = ({ id, isChecked, text, onChange }: Props) => {
+  const { lessThanSM } = useCustomMediaQuery();
+
   return (
-    <Box flex={1} key={id}>
+    <Box flex={1} key={id} data-testid="matrix-checkbox-button-container">
       <MatrixCell>
         <SelectBaseBox
           color={null}
           onHandleChange={onChange}
           checked={isChecked}
           justifyContent="center"
+          padding={lessThanSM ? '12px 8px' : '16px'}
         >
           <CheckboxItem
             id={id}
diff --git a/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx b/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx
index 437c8d35c..eb26b9224 100644
--- a/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx
+++ b/src/entities/activity/ui/items/Matrix/MatrixMultiSelectItem/CheckboxGrid.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 export const CheckboxGrid = ({ rows, options, onChange, values }: Props) => {
   return (
-    <Box display="flex" flex={1} flexDirection="column">
+    <Box display="flex" flex={1} flexDirection="column" data-testid="matrix-checkbox-grid">
       <MatrixHeader options={options} />
 
       {rows.map((row, rowI) => {
diff --git a/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx b/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx
index 83f28f19b..aed774a1a 100644
--- a/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx
+++ b/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioButton.tsx
@@ -14,7 +14,7 @@ type Props = {
 
 export const RadioButton = ({ id, text, isChecked, onChange }: Props) => {
   return (
-    <Box flex={1} key={id}>
+    <Box flex={1} key={id} data-testid="matrix-radio-button-container">
       <MatrixCell>
         <SelectBaseBox
           color={null}
diff --git a/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx b/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx
index fd86f5dcf..de1679e6c 100644
--- a/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx
+++ b/src/entities/activity/ui/items/Matrix/MatrixSingleSelectItem/RadioGrid.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 export const RadioGrid = ({ rows, options, onChange, values }: Props) => {
   return (
-    <Box display="flex" flex={1} flexDirection="column">
+    <Box display="flex" flex={1} flexDirection="column" data-testid="matrix-radio-grid">
       <MatrixHeader options={options} />
 
       {rows.map((row, rowI) => {
diff --git a/src/shared/ui/Items/SelectBase/SelectBaseBox.tsx b/src/shared/ui/Items/SelectBase/SelectBaseBox.tsx
index 27d9e4966..b893a0382 100644
--- a/src/shared/ui/Items/SelectBase/SelectBaseBox.tsx
+++ b/src/shared/ui/Items/SelectBase/SelectBaseBox.tsx
@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import { Theme } from '~/shared/constants';
 
 type Props = PropsWithChildren<{
+  padding?: string;
   justifyContent?:
     | 'flex-start'
     | 'center'
@@ -40,7 +41,7 @@ export const SelectBaseBox = (props: Props) => {
       gap="12px"
       className="response-option"
       borderRadius="12px"
-      padding="16px"
+      padding={props.padding ? props.padding : '16px'}
       border={`2px solid ${borderColor}`}
       bgcolor={props.color ? props.color : backgroundColor}
       onClick={props.onHandleChange}