Feat/enhanced error message (#800)

* This commit enhances the error-message component to show more details about the error.

* This commit places the outlet outside the map component so that the nested components are rendered properly.

---------

Co-authored-by: jona159 <65068389+jona159@users.noreply.github.com>

Author: JerryVincent

app/components/error-message.tsx

@@ -27,7 +27,7 @@ export default function ErrorMessage() {
 	const error = useRouteError()
 	const { t } = useTranslation('common')
 
-	const goBack = () => navigate(-1)
+	const goBack = () => window.history.back()
 	const goHome = () => navigate('/')
 	const refresh = () => window.location.reload()
 
@@ -157,7 +157,7 @@ export default function ErrorMessage() {
 	return (
 		<div className="flex min-h-[400px] w-full items-center justify-center p-4">
 			<Card
-				className={`w-full max-w-md bg-gradient-to-br ${getGradient()} shadow-lg`}
+				className={`w-full max-w-md bg-gradient-to-br ${getGradient()} shadow-2xl border-2 border-white/60 dark:border-zinc-700/80 backdrop-blur-sm ring-1 ring-black/10`}
 			>
 				<CardHeader className="text-center">
 					<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-md dark:bg-zinc-800">

app/routes/explore.tsx

@@ -410,8 +410,12 @@ export default function Explore() {
 					{/* <ClusterLayer
               devices={filterOptionsOn ? GlobalFilteredDevices : data.devices}
             /> */}
-					<Outlet />
 				</Map>
+				<div className="pointer-events-none absolute inset-0 z-10">
+					<div className="pointer-events-auto">
+						<Outlet />
+					</div>
+				</div>
 			</MapProvider>
 		</div>
 	)