fix: Fix group headers positionning

The previous hack didn't work as expected for the collections and feeds
groups. After a certain number of groups, the header passed behind the
cards.

There is still an issue on mobile: if you open the actions menu of a
date group (not the first) and that you scroll up, the menu will appear
behind the headers. That's however a bit less problematic. Also, I plan
to change the popups behaviour by not fixing them to the screen.

src/assets/javascripts/application.js

@@ -17,6 +17,7 @@ import ModalOpenerController from './controllers/modal_opener_controller.js';
 import NewsRefresherController from './controllers/news_refresher_controller.js';
 import PopupController from './controllers/popup_controller.js';
 import TextEditorController from './controllers/text_editor_controller.js';
+import ZindexInverserController from './controllers/zindex_inverser_controller.js';
 
 window.jsConfiguration = JSON.parse(document.getElementById('javascript-configuration').innerHTML);
 
@@ -37,6 +38,7 @@ application.register('modal-opener', ModalOpenerController);
 application.register('news-refresher', NewsRefresherController);
 application.register('popup', PopupController);
 application.register('text-editor', TextEditorController);
+application.register('zindex-inverser', ZindexInverserController);
 
 function adaptLayoutContentBorderRadius () {
     const layoutContentNode = document.querySelector('.layout__content');

src/assets/javascripts/controllers/zindex_inverser_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static get targets () {
+        return ['item'];
+    }
+
+    connect () {
+        const baseZindex = 10;
+        const zindexMax = this.itemTargets.length;
+        this.itemTargets.forEach((item, index) => {
+            item.style.zIndex = baseZindex + zindexMax - index;
+        });
+    }
+}

src/assets/stylesheets/custom/groups.css

@@ -4,6 +4,7 @@
 
 .group__header {
     position: sticky;
+    z-index: 1;
     top: 0;
 
     display: flex;
@@ -16,55 +17,6 @@
     box-shadow: 0 2px 2px var(--color-white);
 }
 
-/**
- * This is a hack to create a descending z-index priority over the
- * group__headers. This is because if a group__header has a popup menu in it,
- * the stacking context (created because of the sticky property) makes it
- * appear below the next group__header. This is the case in the news for
- * instance.
- * The hack only works for 10 elements, but hopefully, this should be enough
- * most of the time.
- */
-.group:nth-child(1) .group__header {
-    z-index: 20;
-}
-
-.group:nth-child(2) .group__header {
-    z-index: 19;
-}
-
-.group:nth-child(3) .group__header {
-    z-index: 18;
-}
-
-.group:nth-child(4) .group__header {
-    z-index: 17;
-}
-
-.group:nth-child(5) .group__header {
-    z-index: 16;
-}
-
-.group:nth-child(6) .group__header {
-    z-index: 15;
-}
-
-.group:nth-child(7) .group__header {
-    z-index: 14;
-}
-
-.group:nth-child(8) .group__header {
-    z-index: 13;
-}
-
-.group:nth-child(9) .group__header {
-    z-index: 12;
-}
-
-.group:nth-child(10) .group__header {
-    z-index: 11;
-}
-
 .group__icon {
     margin-right: var(--space-smaller);
 }