Merge pull request #1103 from MarcelRobitaille/1100-fix-sort-buttons-clipped

Fix keyword ordering buttons clipped by top bar

Author: christianlupus

CHANGELOG.md

@@ -7,6 +7,8 @@
 ### Fixed
 - Prevent slow loading of recipes due to iteration over all files
   [#1072](https://github.com./nextcloud/cookbook/pull/1072) @christianlupus
+- Fix keyword ordering buttons being clipped by top bar
+  [#1103](https://github.com./nextcloud/cookbook/pull/1103) @MarcelRobitaille
 
 ### Maintenance
 - Add composer.json to version control to have unique installed dependency versions

src/components/RecipeListKeywordCloud.vue

@@ -39,15 +39,16 @@
                 />
             </transition-group>
         </div>
-        <div class="settings-buttons">
+        <div v-if="uniqKeywords.length > 0" class="settings-buttons">
             <button
-                class="ordering-button"
+                class="settings-button ordering-button"
                 :title="orderButtonTitle"
                 @click="toggleOrderCriterium"
             >
                 {{ orderButtonText }}
             </button>
             <button
+                class="settings-button"
                 :class="toggleSizeIcon"
                 :title="t('cookbook', 'Toggle keyword area size')"
                 @click="toggleCloudSize"
@@ -222,6 +223,7 @@ export default {
 <style lang="scss" scoped>
 .kw-container {
     position: relative;
+    display: flex;
 }
 
 .kw {
@@ -249,11 +251,11 @@ export default {
 }
 
 .settings-buttons {
-    position: absolute;
-    right: 10px;
-    bottom: -8px;
+    display: flex;
+    align-items: flex-start;
+    padding: 0.5rem;
 
-    button {
+    .settings-button {
         min-height: 8px;
         font-size: 8px;
         vertical-align: bottom;