From 172f911851f24ecd3e361b4fffdc4da3dec79fd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 12 Jan 2023 15:23:45 +0000
Subject: [PATCH] fix: improve breadcrumb spacing (#2889)

https://linear.app/unleash/issue/2-575/improve-the-breadcrumb-spacing


![image](https://user-images.githubusercontent.com/14320932/212101040-1ac8420a-6e16-4879-b030-e343bb977f85.png)


![image](https://user-images.githubusercontent.com/14320932/212101196-50737ab4-49e6-454b-b386-491142798f37.png)
---
 .../common/BreadcrumbNav/BreadcrumbNav.tsx    | 94 ++++++++++---------
 .../layout/MainLayout/MainLayout.tsx          |  7 +-
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
index 2c5e3cacd3..3b73339550 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -6,9 +6,9 @@ import { useContext } from 'react';
 import StringTruncator from '../StringTruncator/StringTruncator';
 import { styled } from '@mui/material';
 
-const StyledBreadCrumbs = styled(Breadcrumbs)(({ theme }) => ({
-    position: 'absolute',
-    top: theme.spacing(0.25),
+const StyledBreadcrumbContainer = styled('div')(({ theme }) => ({
+    height: theme.spacing(2.5),
+    margin: theme.spacing(2, 0),
 }));
 
 const StyledParagraph = styled('p')({
@@ -50,55 +50,57 @@ const BreadcrumbNav = () => {
         );
 
     return (
-        <ConditionallyRender
-            condition={
-                (location.pathname.includes('admin') && isAdmin) ||
-                !location.pathname.includes('admin')
-            }
-            show={
-                <ConditionallyRender
-                    condition={paths.length > 1}
-                    show={
-                        <StyledBreadCrumbs aria-label="Breadcrumbs">
-                            {paths.map((path, index) => {
-                                const lastItem = index === paths.length - 1;
-                                if (lastItem) {
+        <StyledBreadcrumbContainer>
+            <ConditionallyRender
+                condition={
+                    (location.pathname.includes('admin') && isAdmin) ||
+                    !location.pathname.includes('admin')
+                }
+                show={
+                    <ConditionallyRender
+                        condition={paths.length > 1}
+                        show={
+                            <Breadcrumbs aria-label="Breadcrumbs">
+                                {paths.map((path, index) => {
+                                    const lastItem = index === paths.length - 1;
+                                    if (lastItem) {
+                                        return (
+                                            <StyledParagraph key={path}>
+                                                <StringTruncator
+                                                    text={path}
+                                                    maxWidth="200"
+                                                    maxLength={25}
+                                                />
+                                            </StyledParagraph>
+                                        );
+                                    }
+
+                                    let link = '/';
+
+                                    paths.forEach((path, i) => {
+                                        if (i !== index && i < index) {
+                                            link += path + '/';
+                                        } else if (i === index) {
+                                            link += path;
+                                        }
+                                    });
+
                                     return (
-                                        <StyledParagraph key={path}>
+                                        <StyledLink key={path} to={link}>
                                             <StringTruncator
+                                                maxLength={25}
                                                 text={path}
                                                 maxWidth="200"
-                                                maxLength={25}
                                             />
-                                        </StyledParagraph>
+                                        </StyledLink>
                                     );
-                                }
-
-                                let link = '/';
-
-                                paths.forEach((path, i) => {
-                                    if (i !== index && i < index) {
-                                        link += path + '/';
-                                    } else if (i === index) {
-                                        link += path;
-                                    }
-                                });
-
-                                return (
-                                    <StyledLink key={path} to={link}>
-                                        <StringTruncator
-                                            maxLength={25}
-                                            text={path}
-                                            maxWidth="200"
-                                        />
-                                    </StyledLink>
-                                );
-                            })}
-                        </StyledBreadCrumbs>
-                    }
-                />
-            }
-        />
+                                })}
+                            </Breadcrumbs>
+                        }
+                    />
+                }
+            />
+        </StyledBreadcrumbContainer>
     );
 };
 
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index f8da2d8bac..82a1602af8 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -34,8 +34,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
 
 const MainLayoutContent = styled(Grid)(({ theme }) => ({
     width: '1250px',
-    marginLeft: 'auto',
-    marginRight: 'auto',
+    margin: '0 auto',
     [theme.breakpoints.down('lg')]: {
         width: '1024px',
     },
@@ -62,10 +61,10 @@ const StyledImg = styled('img')(() => ({
 
 const MainLayoutContentContainer = styled('div')(({ theme }) => ({
     height: '100%',
-    padding: theme.spacing(6.5, 0),
+    padding: theme.spacing(0, 0, 6.5, 0),
     position: 'relative',
     [theme.breakpoints.down('md')]: {
-        padding: theme.spacing(6.5, 1.5),
+        padding: theme.spacing(0, 1.5, 6.5, 1.5),
     },
     zIndex: 200,
 }));