Fix mobile version of matrix grid

ChildMindInstitute · Apr 4, 2024 · 2ba417f · 2ba417f
1 parent 1d2a728
commit 2ba417f
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 5 deletions.
diff --git a/src/entities/activity/ui/items/Matrix/MatrixCell.tsx b/src/entities/activity/ui/items/Matrix/MatrixCell.tsx
@@ -15,13 +15,15 @@ export const MatrixCell = ({ children, isRowLabel }: Props) => {
 
   return (
     <Box
+      display="flex"
       height={lessThanTarget ? '100px' : '112px'}
       padding={lessThanTarget ? '8px' : '14px'}
       justifyContent="center"
       alignItems="center"
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}