Refactor survey task Chooser and Choices spacing

zooniverse · Jan 10, 2025 · c33cf12 · c33cf12
1 parent af634b5
commit c33cf12
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/Chooser.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/Chooser.js
@@ -63,6 +63,8 @@ function Chooser ({
     <Box
       as={task.instruction ? 'fieldset' : 'div'}
       alignSelf='center'
+      margin='0'
+      pad='0'
       style={{ border: 'none' }}
       width='100%'
     >

diff --git a/...fier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js b/...fier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js
@@ -18,8 +18,8 @@ const StyledGrid = styled.ul`
   gap: ${props => props.$hideThumbnails ? '1px' : '0'};
   grid-auto-flow: column;
   grid-template-columns: repeat(${props => props.$columnsCount}, ${props => {
-    if (props.$columnsCount === 3) return '166px';
-    if (props.$columnsCount === 2) return '250px';
+    if (props.$columnsCount === 3) return (props.$hideThumbnails ? '165.33px' : '166px');
+    if (props.$columnsCount === 2) return (props.$hideThumbnails ? '248.5px' : '249px');
     return '1fr';
   }});
   grid-template-rows: repeat(${props => props.$rowsCount}, ${props => props.$hideThumbnails ? '40px' : '60px'});

diff --git a/packages/lib-classifier/src/stories/components/MockTask/MockTask.js b/packages/lib-classifier/src/stories/components/MockTask/MockTask.js
@@ -151,7 +151,7 @@ export default function MockTask({
   }
 
   /** mimic task area per Layout and TaskArea components */
-  const taskAreaWidth = MockTask.store?.workflows?.active?.hasSurveyTask ? '540px' : '400px';
+  const taskAreaWidth = MockTask.store?.workflows?.active?.hasSurveyTask ? '538px' : '400px';
 
   return (
     <Provider classifierStore={MockTask.store}>