refactor: simplify SearchItem component structure and improve styling (#683)

* refactor: simplify SearchItem component structure and improve styling

* style: adjust padding in AlertContainer and SearchResults components

Author: shhdgit

src/components/MDXComponents/Alert.tsx

@@ -10,8 +10,7 @@ function AlertContainer(props: { children: React.ReactNode }) {
   return (
     <Box
       sx={{
-        paddingTop: "0.5rem",
-        paddingBottom: "0.5rem",
+        paddingTop: "1rem",
         "& .MuiAlert-message p": {
           marginBottom: 0,
           marginTop: 0,

src/components/Search/Results.tsx

@@ -84,7 +84,7 @@ export default function SearchResults(props: {
   return (
     <Box
       sx={{
-        padding: "2rem 0",
+        padding: "1rem 0",
       }}
       className={clsx("algolia-autocomplete", props.className)}
     >
@@ -188,37 +188,27 @@ function SearchItem(props: { data: any }) {
 
   return (
     <Stack spacing={1}>
-      <Box
+      <Typography
+        variant="h5"
+        component="a"
+        href={data.url}
         sx={{
-          display: "flex",
-          alignItems: "flex-start",
-          flexWrap: "wrap",
-          gap: "0.5rem",
+          textDecoration: "none",
+          "& >div": {
+            width: "100%",
+            maxWidth: "100%",
+          },
         }}
       >
-        <Typography
-          variant="h5"
-          component="a"
-          href={data.url}
-          sx={{
-            textDecoration: "none",
-            minWidth: 0,
-            flex: "1 1 16rem",
-            overflowWrap: "anywhere",
-            "& >div": {
-              width: "100%",
-              maxWidth: "100%",
-            },
-          }}
-        >
-          {!!data._highlightResult?.hierarchy?.lvl0 && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: data._highlightResult.hierarchy.lvl0?.value,
-              }}
-            />
-          )}
-        </Typography>
+        {!!data._highlightResult?.hierarchy?.lvl0 && (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: data._highlightResult.hierarchy.lvl0?.value,
+            }}
+          />
+        )}
+      </Typography>
+      <Stack direction="row" spacing={1} alignItems="center">
         {!!category && !!categoryLabel && (
           <Chip
             size="small"
@@ -233,36 +223,37 @@ function SearchItem(props: { data: any }) {
             }}
           />
         )}
-      </Box>
-      {data?._highlightResult?.url ? (
-        <Typography
-          variant="body1"
-          component="a"
-          href={data.url}
-          sx={{
-            textDecoration: "none",
-            width: "fit-content",
-            "& >div": {
+        {data?._highlightResult?.url ? (
+          <Typography
+            variant="body1"
+            component="a"
+            href={data.url}
+            sx={{
+              textDecoration: "none",
               width: "fit-content",
-            },
-          }}
-        >
-          <div
-            dangerouslySetInnerHTML={{
-              __html: data._highlightResult.url.value,
+              "& >div": {
+                width: "fit-content",
+              },
+              color: "carbon.700",
             }}
-          />
-        </Typography>
-      ) : (
-        <Typography
-          sx={{
-            textDecoration: "none",
-            width: "fit-content",
-          }}
-        >
-          {data.url}
-        </Typography>
-      )}
+          >
+            <div
+              dangerouslySetInnerHTML={{
+                __html: data._highlightResult.url.value,
+              }}
+            />
+          </Typography>
+        ) : (
+          <Typography
+            sx={{
+              textDecoration: "none",
+              width: "fit-content",
+            }}
+          >
+            {data.url}
+          </Typography>
+        )}
+      </Stack>
       <Typography component="div" sx={{}}>
         <div
           dangerouslySetInnerHTML={{