From 1fe1ad48d831d158b14067bac9fecf305365b542 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Wed, 9 Feb 2022 12:24:18 -0500
Subject: [PATCH 1/3] Make AppControls breadcrums sticky (#834)

Make the buttons always visible so that they are accessible even when
scrolled halfway down a recipe

Signed-off-by: Marcel Robitaille <marcelrobitaille11@gmail.com>
Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 src/components/AppControls.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

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

From 66db68cf2d0afbcab41262f1273b871a1e0991c7 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sun, 20 Feb 2022 17:00:10 +0100
Subject: [PATCH 2/3] Make the code styler happy

Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 src/components/AppControls.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

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

From 2ac07d58d468654d625e6453c7ead4b92a26aa96 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sun, 20 Feb 2022 17:01:42 +0100
Subject: [PATCH 3/3] Update changelog

Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca452f47b..b1f946af6 100644
--- 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