This fixes stickyness of the search dialog to the bottom with long documents.
We have 2 or 3 elements in app-content-details: the page title, the editor, and optionally the search dialog. Page title and editor should align to the top, search dialog shall align to the bottom. Scroll container shall be in the editor.
First, the editor didn't take all space, so with a short document, the search dialog didn't align to the bottom. This was tried to fix by e9180858f5545883149e91e90ca76245a33a0958, which had other unwanted side effects. So another attempt was bfb69b3fa1c0556e9e10fa1801fb1fe65dcebd54. But the scroll container was wrong, so the search dialog moved out of the viewport with this approach. Instead of playing around more with position: sticky I decided to migrate it to flexbox instead.
I tested view and edit mode with sheet and full page width and with short documents and long documents. I also checked the loading skeletons for page header and page content.
🏁 Checklist
[x] Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
This fixes stickyness of the search dialog to the bottom with long documents.
We have 2 or 3 elements in
app-content-details: the page title, the editor, and optionally the search dialog. Page title and editor should align to the top, search dialog shall align to the bottom. Scroll container shall be in the editor.First, the editor didn't take all space, so with a short document, the search dialog didn't align to the bottom. This was tried to fix by e9180858f5545883149e91e90ca76245a33a0958, which had other unwanted side effects. So another attempt was bfb69b3fa1c0556e9e10fa1801fb1fe65dcebd54. But the scroll container was wrong, so the search dialog moved out of the viewport with this approach. Instead of playing around more with
position: stickyI decided to migrate it toflexboxinstead.I tested view and edit mode with sheet and full page width and with short documents and long documents. I also checked the loading skeletons for page header and page content.
🏁 Checklist
npm run lint/npm run stylelint/composer run cs:check)