fix: prevent tutorial footer button overlap (#171)

qdrant · Apr 2, 2024 · 202bca9 · 202bca9
1 parent c9bfe00
commit 202bca9
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/src/components/InteractiveTutorial/TutorialFooter.jsx b/src/components/InteractiveTutorial/TutorialFooter.jsx
@@ -30,20 +30,18 @@ export const TutorialFooter = () => {
   return (
     <Box mt={10}>
       <Divider />
-      <Grid container mt={4}>
-        <Grid item xs={4} sx={{ textAlign: 'left' }}>
+      <Grid container mt={4} spacing={1} justifyContent={'space-between'}>
+        <Grid item>
           {currentPageIndex >= 0 && (
             <Button sx={{ alignItems: 'flex-start' }} onClick={handlePrev} startIcon={<ArrowBack />}>
               Previous
             </Button>
           )}
         </Grid>
 
-        <Grid item xs={4} sx={{ textAlign: 'center' }}>
-          {currentPageIndex >= 0 && <Button onClick={() => navigate('/tutorial')}>Home</Button>}
-        </Grid>
+        <Grid item>{currentPageIndex >= 0 && <Button onClick={() => navigate('/tutorial')}>Home</Button>}</Grid>
 
-        <Grid item xs={4} sx={{ textAlign: 'right' }}>
+        <Grid item>
           {currentPageIndex < pageKeys.length - 1 && (
             <Button sx={{ alignItems: 'flex-start' }} onClick={handleNext} endIcon={<ArrowForward />}>
               Next