Merge pull request #888 from MarcelRobitaille/sticky-breadcrums

Make AppControls breadcrums sticky (#834)
nextcloud · Feb 20, 2022 · d686024 · d686024
2 parents a4b4328 + 2ac07d5
commit d686024
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,11 +9,14 @@
   [#880](https://github.com/nextcloud/cookbook/pull/880) @christianlupus
 - Usage of caches for NPM speedup
   [#883](https://github.com/nextcloud/cookbook/pull/883) @christianlupus
+- Make the controls sticky on top
+  [#888](https://github.com/nextcloud/cookbook/pull/888) @MarcelRobitaille
 
 ### Documentation
 - Added clarification between categories and keywords for users
   [#889](https://github.com/nextcloud/cookbook/pull/889) @MarcelRobitaille
 
+
 ## 0.9.9 - 2022-01-13
 
 ### Fixed

diff --git a/src/components/AppControls.vue b/src/components/AppControls.vue
@@ -344,8 +344,19 @@ export default {
 
 <style scoped>
 .wrapper {
+    /* Sticky is better than fixed because fixed takes the element out of flow,
+     which breaks the height, putting elements underneath */
+    position: sticky;
+
+    /* This is competing with the recipe instructions which have z-index: 1 */
+    z-index: 2;
+
+    /* The height of the nextcloud header */
+    top: 50px;
     width: 100%;
     padding-left: 4px;
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-main-background);
 }
 
 .active {