diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss index 682379ad..77f21333 100644 --- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss +++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss @@ -7,17 +7,18 @@ padding: 24px; background-color: var(--grey-soft); width: 100%; - + gap: 32px; .content { width: 100%; - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; + display: flex; + justify-content: space-between; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @media (max-width: $screen-ls) { + display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } diff --git a/src/front/Components/DesignSystem/UserFolder/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/classes.module.scss index b091f167..7c711ca0 100644 --- a/src/front/Components/DesignSystem/UserFolder/classes.module.scss +++ b/src/front/Components/DesignSystem/UserFolder/classes.module.scss @@ -56,6 +56,11 @@ grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 32px; + + @media(max-width: $screen-s){ + grid-template-columns: 1fr; + gap: 32px; + } } .button-container { @@ -63,6 +68,20 @@ justify-items: start; gap: 32px; margin-top: 16px; + + .button-desktop{ + @media(max-width: $screen-s){ + display: none; + } + } + + .button-mobile{ + display: none; + + @media(max-width: $screen-s){ + display: block; + } + } } } } diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index 0a42546d..a8014bc2 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -114,7 +114,8 @@ export default class UserFolder extends React.Component { Demander un autre document{" "} - {} + {} + {} )}