breadscrumbs of root card

Author: SandraMonnier

colab-webapp/src/main/node/app/src/components/cards/CardRootView.tsx

@@ -9,7 +9,7 @@ import { css } from '@emotion/css';
 import { CardContent } from 'colab-rest-client';
 import * as React from 'react';
 import { useAndLoadSubCards } from '../../store/selectors/cardSelector';
-import { space_sm } from '../../styling/style';
+import { space_lg, space_sm, space_xs } from '../../styling/style';
 import InlineLoading from '../common/element/InlineLoading';
 import Flex from '../common/layout/Flex';
 import { PresenceContext } from '../presence/PresenceContext';
@@ -43,7 +43,11 @@ export default function RootView({ rootContent }: { rootContent: CardContent | n
       })}
     >
       <Dndwrapper cards={subCards}>
-        <ProjectBreadcrumbs />
+        <ProjectBreadcrumbs
+          className={css({
+            padding: space_xs + ' ' + space_xs + ' ' + space_xs + ' ' + space_lg,
+          })}
+        />
         {rootContent != null && rootContent.id != null ? (
           <Flex className={css({ overflow: 'hidden' })} justify="center" direction="row" grow={1}>
             <Flex

colab-webapp/src/main/node/app/src/components/projects/ProjectBreadcrumbs.tsx

@@ -37,11 +37,13 @@ const breadcrumbsStyle = css({
 interface ProjectBreadcrumbsProps {
   card?: Card;
   cardContent?: CardContent;
+  className?: string;
 }
 
 export default function ProjectBreadcrumbs({
   card,
   cardContent,
+  className,
 }: ProjectBreadcrumbsProps): JSX.Element {
   const { status, project: currentProject } = useAppSelector(selectCurrentProject);
 
@@ -52,7 +54,7 @@ export default function ProjectBreadcrumbs({
   }
 
   return (
-    <Flex align="center" className={p_sm}>
+    <Flex align="center" className={cx(p_sm, className)}>
       {ancestors.map((ancestor, x) => (
         <Ancestor
           key={x}