From 6b0e57c22135b3e705f70e72f6685a718d27aa71 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 22:00:31 +0100
Subject: [PATCH] [web] Fix spacing of pages with tabs

---
 web-src/src/components/TabsAudiobooks.vue    | 4 ++--
 web-src/src/components/TabsMusic.vue         | 4 ++--
 web-src/src/components/TabsSettings.vue      | 4 ++--
 web-src/src/mystyles.scss                    | 5 ++++-
 web-src/src/templates/ContentWithHeading.vue | 6 +++---
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
index 869ec81e..d8cef3a2 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="section tabs-section">
     <div class="container">
-      <div class="columns is-centered">
-        <div class="column is-four-fifths">
+      <div class="columns is-centered my-0">
+        <div class="column is-four-fifths py-0">
           <div class="tabs is-centered is-small">
             <ul>
               <router-link
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index e7176471..d7373a49 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="section tabs-section">
     <div class="container">
-      <div class="columns is-centered">
-        <div class="column is-four-fifths">
+      <div class="columns is-centered my-0">
+        <div class="column is-four-fifths py-0">
           <div class="tabs is-centered is-small">
             <ul>
               <router-link
diff --git a/web-src/src/components/TabsSettings.vue b/web-src/src/components/TabsSettings.vue
index 7eba3228..0926ffaa 100644
--- a/web-src/src/components/TabsSettings.vue
+++ b/web-src/src/components/TabsSettings.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="section tabs-section">
     <div class="container">
-      <div class="columns is-centered">
-        <div class="column is-four-fifths">
+      <div class="columns is-centered my-0">
+        <div class="column is-four-fifths py-0">
           <div class="tabs is-centered is-small">
             <ul>
               <router-link
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 5d4b746f..636c0776 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -4,9 +4,12 @@
 @use 'bulma/sass/utilities/mixins';
 
 .tabs-section {
+  background: var(--bulma-body-background-color);
   padding-bottom: 0;
   padding-top: 0;
-  background: var(--bulma-body-background-color);
+  position: sticky;
+  top: var(--bulma-navbar-height);
+  width: 100%;
   z-index: 20;
 }
 
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 0048cada..bfb88c65 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -3,8 +3,8 @@
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
-          <div v-if="$slots.options" class="mb-2">
-            <div :class="{ 'is-hidden': hidden }" class="mb-2">
+          <div v-if="$slots.options" class="my-2">
+            <div :class="{ 'is-hidden': hidden }" class="mt-4">
               <slot name="options" />
             </div>
             <div class="buttons is-centered">
@@ -56,7 +56,7 @@ export default {
 </script>
 
 <style scope>
-section:not(.is-tabs) + section {
+section:not(.tabs-section) + section {
   padding-top: 0;
 }
 </style>