Fix scroll in backoffice regulatory zone form

MTES-MCT · Nov 30, 2023 · ac6cf33 · ac6cf33
1 parent afc0621
commit ac6cf33
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/frontend/cypress/e2e/backoffice/update_regulation.spec.ts b/frontend/cypress/e2e/backoffice/update_regulation.spec.ts
@@ -104,8 +104,7 @@ context('Update Regulation', () => {
     // complete missing values in form
     cy.get('[type="checkbox"]').first().check({ force: true })
     cy.get('[type="checkbox"]').eq(2).check({ force: true })
-    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true })
-    cy.scrollTo(0, 500)
+    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true }).scrollIntoView()
 
     cy.log('Select authorized species and groups')
     cy.get('.rs-picker-toggle-placeholder')
@@ -165,8 +164,7 @@ context('Update Regulation', () => {
     // complete missing values in form
     cy.get('[type="checkbox"]').first().check({ force: true })
     cy.get('[type="checkbox"]').eq(2).check({ force: true })
-    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true })
-    cy.scrollTo(0, 500)
+    cy.get('*[data-cy^="open-regulated-species"]').click({ force: true }).scrollIntoView()
     cy.get('*[data-cy^="regulatory-gears-section"]').click({ force: true })
     cy.get('*[data-cy="authorized-gears-selector"]').scrollIntoView()
 

diff --git a/frontend/src/features/Backoffice/edit_regulation/EditRegulation.tsx b/frontend/src/features/Backoffice/edit_regulation/EditRegulation.tsx
@@ -384,13 +384,14 @@ const ErrorMessage = styled.div`
 
 const Wrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  overflow-y: auto;
   width: 100%;
 `
 
 const Body = styled.div`
-  height: calc(100vh - 75px);
-  overflow-y: scroll;
+  flex-grow: 1;
+  padding-bottom: 50px;
 `
 
 const Header = styled.div`