fix: 🐛 agencyInfo hover bug on mobile devices

package.json

@@ -68,6 +68,7 @@
 		"react-app-polyfill": "^2.0.0",
 		"react-datepicker": "3.3.0",
 		"react-dev-utils": "^11.0.0",
+		"react-device-detect": "^1.15.0",
 		"react-dom": "^17.0.1",
 		"react-refresh": "^0.8.3",
 		"react-router-dom": "5.2.0",

src/components/agencySelection/AgencySelection.tsx

@@ -17,6 +17,7 @@ import { DEFAULT_POSTCODE } from '../registration/prefillPostcode';
 import { RadioButton } from '../radioButton/RadioButton';
 import { Loading } from '../app/Loading';
 import { Text, LABEL_TYPES } from '../text/Text';
+import { isMobile } from 'react-device-detect';
 
 const introItemsTranslations = [
 	'registration.agencySelection.intro.point1',
@@ -309,12 +310,20 @@ export const AgencySelection = (props: AgencySelectionProps) => {
 																agency
 														  )
 												}
-												onMouseEnter={() =>
-													setDisplayAgencyInfo(agency)
-												}
-												onMouseLeave={() =>
-													setDisplayAgencyInfo(null)
-												}
+												onMouseEnter={() => {
+													if (!isMobile) {
+														setDisplayAgencyInfo(
+															agency
+														);
+													}
+												}}
+												onMouseLeave={() => {
+													if (!isMobile) {
+														setDisplayAgencyInfo(
+															null
+														);
+													}
+												}}
 											/>
 											{displayAgencyInfo &&
 												displayAgencyInfo?.id ===