From 8042edc13c3f22b6c0e63d27c2f593d5d3fbfb59 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 14 Apr 2023 13:55:54 +0200
Subject: [PATCH] UX: [permissiongroup] fix form with new sticky-form class

---
 .../public/chill/scss/record_actions.scss     | 40 ++++++++++++++-----
 .../views/PermissionsGroup/edit.html.twig     |  2 +-
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss
index b8f60e250..57be7c8b4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss
@@ -1,3 +1,11 @@
+/// mixin to set sticky area on bottom when scrolling
+@mixin sticky-bottom {
+    position: sticky;
+    bottom: 0;
+    margin-top: 4em;
+    z-index: 1000;
+}
+
 ul.record_actions {
    display: flex;
    flex-direction: row;
@@ -53,16 +61,30 @@ ul.record_actions {
       }
    }
 }
+
+.sticky-form {
+    background-color: $white;
+    padding: 1em;
+    margin: -1em;
+    border-top: 1px solid $chill-ll-gray;
+    @include sticky-bottom;
+
+    .sticky-form-buttons {
+        position: initial;
+        bottom: unset;
+        margin-top: unset;
+        z-index: unset;
+    }
+}
+
 .sticky-form-buttons {
-   margin-top: 4em;
-   background-color: $beige;
-   position: sticky;
-   bottom: 0.3em;
-   text-align: center;
-   display: flex;
-   padding: 0.8em 1.6em;
-   border-radius: 0;
-   z-index: 1000;
+    display: flex;
+    background-color: $beige;
+    text-align: center;
+    padding: 0.8em 1.6em;
+    border-radius: 0;
+    @include sticky-bottom;
+    bottom: 0.3em;
 }
 
 /// EXCEPTIONS
diff --git a/src/Bundle/ChillMainBundle/Resources/views/PermissionsGroup/edit.html.twig b/src/Bundle/ChillMainBundle/Resources/views/PermissionsGroup/edit.html.twig
index a4c1e76fe..36d0b5404 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/PermissionsGroup/edit.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/PermissionsGroup/edit.html.twig
@@ -73,7 +73,7 @@
         <p>{{ 'This group does not provide any permission'|trans }}</p>
     {%- endif -%}
 
-    <div class="mt-5">
+    <div class="sticky-form">
         <h2>{{ 'Grant new permissions'|trans }}</h2>
 
         {{ form_start(add_role_scopes_form) }}