Sticky permissions overview header (#12704)

* Sticky permissions overview header

* refactor to script setup

* add header bar height as css variable

app/src/layouts/calendar/calendar.vue

@@ -40,7 +40,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .calendar-layout {
-	height: calc(100% - calc(61px + 2 * 24px));
+	height: calc(100% - calc(var(--header-bar-height) + 2 * 24px));
 	padding: var(--content-padding);
 	padding-top: 0;
 }

app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue

@@ -9,22 +9,19 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-	setup() {
-		const { t } = useI18n();
-		return { t };
-	},
-});
+const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
 .permissions-overview-header {
 	--v-icon-color: var(--foreground-subdued);
 
+	position: sticky;
+	top: calc(var(--header-bar-height) - 1px); // minus 1px to avoid gaps
+	z-index: 4;
 	display: flex;
 	padding: 12px;
 	background-color: var(--background-input);

app/src/styles/_variables.scss

@@ -8,6 +8,7 @@
 	--fast: 125ms;
 	--medium: 200ms;
 	--slow: 300ms;
+	--header-bar-height: 61px;
 	--content-padding: 12px;
 	--border-width: 2px;
 	--border-radius-outline: 6px;

app/src/views/private/components/header-bar/header-bar.vue

@@ -96,7 +96,7 @@ export default defineComponent({
 	align-items: center;
 	justify-content: flex-start;
 	width: 100%;
-	height: 61px;
+	height: var(--header-bar-height);
 	margin: 0;
 	padding: 0 10px;
 	background-color: var(--background-page);