feat: make tool responsive

src/components/ToolBreadcrumb.tsx

@@ -14,7 +14,7 @@ interface BreadcrumbComponentProps {
 const ToolBreadcrumb: React.FC<BreadcrumbComponentProps> = ({ items }) => {
   const theme = useTheme();
   return (
-    <Breadcrumbs aria-label="breadcrumb">
+    <Breadcrumbs>
       {items.map((item, index) => {
         if (index === items.length - 1 || !item.link) {
           return (

src/components/ToolHeader.tsx

@@ -2,6 +2,7 @@ import { Button, Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
+import Grid from '@mui/material/Grid';
 
 interface ToolHeaderProps {
   title: string;
@@ -12,17 +13,23 @@ interface ToolHeaderProps {
 
 function ToolLinks() {
   return (
-    <Box display="flex" gap={2} my={2}>
-      <Button variant="outlined" href="#tool">
-        Use This Tool
-      </Button>
-      <Button variant="outlined" href="#examples">
-        See Examples
-      </Button>
-      <Button variant="outlined" href="#tour">
-        Learn How to Use
-      </Button>
-    </Box>
+    <Grid container spacing={2} mt={1}>
+      <Grid item md={12} lg={4}>
+        <Button fullWidth variant="outlined" href="#tool">
+          Use This Tool
+        </Button>
+      </Grid>
+      <Grid item md={12} lg={4}>
+        <Button fullWidth variant="outlined" href="#examples">
+          See Examples
+        </Button>
+      </Grid>
+      <Grid item md={12} lg={4}>
+        <Button fullWidth variant="outlined" href="#tour">
+          Learn How to Use
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 
@@ -44,16 +51,23 @@ export default function ToolHeader({
           { title }
         ]}
       />
-      <Stack direction={'row'} alignItems={'center'} spacing={2}>
-        <Box>
+      <Grid mt={1} container spacing={2}>
+        <Grid item xs={12} md={8}>
           <Typography mb={2} fontSize={30} color={'primary'}>
             {title}
           </Typography>
           <Typography fontSize={20}>{description}</Typography>
           <ToolLinks />
-        </Box>
-        {image && <img width={'250'} src={image} />}
-      </Stack>
+        </Grid>
+
+        {image && (
+          <Grid item xs={12} md={4}>
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+              <img width={'250'} src={image} />
+            </Box>
+          </Grid>
+        )}
+      </Grid>
     </Box>
   );
 }

src/components/ToolInputAndResult.tsx

@@ -10,10 +10,10 @@ export default function ToolInputAndResult({
 }) {
   return (
     <Grid id="tool" container spacing={2}>
-      <Grid item xs={6}>
+      <Grid item xs={12} md={6}>
         {input}
       </Grid>
-      <Grid item xs={6}>
+      <Grid item xs={12} md={6}>
         {result}
       </Grid>
     </Grid>

src/components/allTools/AllTools.tsx

@@ -21,7 +21,7 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         <Grid container spacing={2}>
           {toolCards.map((card, index) => (
-            <Grid item xs={4} key={index}>
+            <Grid item xs={12} md={6} lg={4} key={index}>
               <ToolCard
                 title={card.title}
                 description={card.description}

src/components/options/ToolOptionGroups.tsx

@@ -1,6 +1,7 @@
 import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
 import { Box, Stack } from '@mui/material';
+import Grid from '@mui/material/Grid';
 
 interface ToolOptionGroup {
   title: string;
@@ -13,15 +14,15 @@ export default function ToolOptionGroups({
   groups: ToolOptionGroup[];
 }) {
   return (
-    <Stack direction={'row'} spacing={2}>
+    <Grid container spacing={2}>
       {groups.map((group) => (
-        <Box key={group.title}>
+        <Grid item xs={12} md={6} key={group.title}>
           <Typography mb={1} fontSize={22}>
             {group.title}
           </Typography>
           {group.component}
-        </Box>
+        </Grid>
       ))}
-    </Stack>
+    </Grid>
   );
 }