use ToggleDetails for touch friendly

Author: thedannywahl

src/components/HelpTray.tsx

@@ -50,7 +50,7 @@ const HelpTray: React.FC<HelpTrayProps> = ({ isTrayOpen, setIsTrayOpen }) => {
 		>
 			<View as="div" padding="small">
 				{TrayHeader}
-				<Flex direction="column" padding="small">
+				<Flex direction="column" gap="small" padding="small">
 					<HelpTraySectionStages />
 					<HelpTraySectionFeatures />
 				</Flex>

src/components/HelpTraySectionFeatures.tsx

@@ -81,12 +81,7 @@ const HelpTraySectionFeatures: FC = () => {
 
 	return (
 		<Flex.Item>
-			<ToggleGroup
-				border={false}
-				size="small"
-				summary={toggleHeader}
-				toggleLabel="Feature descriptions"
-			>
+			<ToggleDetails fluidWidth size="large" summary={toggleHeader}>
 				<View as="div" padding="small 0">
 					{Object.entries(Features).map(([stage, features]) =>
 						features.map((feature, idx) => {
@@ -109,7 +104,7 @@ const HelpTraySectionFeatures: FC = () => {
 						}),
 					)}
 				</View>
-			</ToggleGroup>
+			</ToggleDetails>
 		</Flex.Item>
 	);
 };

src/components/HelpTraySectionStages.tsx

@@ -62,12 +62,7 @@ const HelpTraySectionStages: FC = () => {
 
 	return (
 		<Flex.Item>
-			<ToggleGroup
-				border={false}
-				size="small"
-				summary={toggleHeader}
-				toggleLabel="Product development definitions"
-			>
+			<ToggleDetails fluidWidth size="large" summary={toggleHeader}>
 				<View as="div" padding="small 0">
 					{Stages.map((stage: Stage, idx) => {
 						const key = `${stage}_${stage.abbreviation}_${idx}`;
@@ -88,7 +83,7 @@ const HelpTraySectionStages: FC = () => {
 						);
 					})}
 				</View>
-			</ToggleGroup>
+			</ToggleDetails>
 		</Flex.Item>
 	);
 };