From c33cf12ddca35a62bb025608c9ac6a57b2aff3fd Mon Sep 17 00:00:00 2001
From: Mark Bouslog <mark@zooniverse.org>
Date: Fri, 10 Jan 2025 15:28:57 -0600
Subject: [PATCH] Refactor survey task Chooser and Choices spacing

---
 .../tasks/survey/components/components/Chooser/Chooser.js     | 2 ++
 .../components/Chooser/components/Choices/Choices.js          | 4 ++--
 .../src/stories/components/MockTask/MockTask.js               | 2 +-
 3 files changed, 5 insertions(+), 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
index 9e469ddccf..b6d9f4ad3e 100644
--- 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/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js
index 04810c9654..4b3a5daa80 100644
--- a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js
+++ b/packages/lib-classifier/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
index 3dec87d1f1..702a84e3ea 100644
--- 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}>