BC-9673 - Fix usability problem with long page titles

src/components/templates/DefaultWireframe.vue

@@ -2,7 +2,7 @@
 	<div class="wireframe-container" :class="{ 'wireframe-container-flex': isFlexContainer }">
 		<div id="notify-screen-reader-polite" aria-live="polite" class="d-sr-only" />
 		<div id="notify-screen-reader-assertive" aria-live="assertive" class="d-sr-only" />
-		<div class="wireframe-header sticky">
+		<div class="wireframe-header">
 			<Breadcrumbs v-if="breadcrumbs.length" :breadcrumbs="breadcrumbs" />
 			<div v-else :class="{ 'breadcrumbs-placeholder': smAndUp }" />
 			<slot name="header">
@@ -44,8 +44,8 @@
 					</speed-dial-menu>
 				</slot>
 			</div>
-			<v-divider v-if="showDivider" class="mx-n6" role="presentation" />
 		</div>
+		<v-divider v-if="showDivider" role="presentation" />
 		<v-container
 			:fluid="maxWidth !== 'nativ'"
 			class="main-content"
@@ -145,6 +145,8 @@ const showDivider = computed(() => !props.hideBorder && !!(props.headline || slo
 	padding: 0 24px;
 	display: flex;
 	flex-direction: column;
+	background-color: rgb(var(--v-theme-white));
+	z-index: 20;
 }
 
 :deep(.v-application__wrap) {
@@ -165,12 +167,6 @@ const showDivider = computed(() => !props.hideBorder && !!(props.headline || slo
 	margin: 0;
 }
 
-.v-divider {
-	z-index: -1;
-	margin-right: -1.5rem;
-	margin-left: -1.5rem;
-}
-
 .breadcrumbs-placeholder {
 	height: 22px;
 }
@@ -204,6 +200,7 @@ $fab-wrapper-height: 80px;
 	height: $fab-wrapper-height;
 	margin-top: -#{$fab-wrapper-height};
 	pointer-events: none;
+	z-index: 100;
 
 	* {
 		pointer-events: auto;

src/modules/ui/layout/topbar/Topbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<VAppBar flat :height="appBarHeight">
+	<VToolbar flat :height="appBarHeight" :class="!props.sidebarExpanded && isFixed ? 'toolbar--fixed' : ''">
 		<CloudLogo v-if="!sidebarExpanded" class="mt-1" />
 		<template #prepend>
 			<VAppBarNavIcon
@@ -43,7 +43,13 @@
 			data-testid="school-logo"
 		/>
 		<UserMenu v-if="user" :user="user" :role-names="roleNames" class="mr-3" />
-	</VAppBar>
+	</VToolbar>
+	<div
+		v-if="!props.sidebarExpanded && isFixed"
+		aria-hidden="true"
+		class="toolbar-placeholder"
+		:style="{ height: appBarHeight + 'px' }"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -55,10 +61,42 @@ import UserMenu from "./UserMenu.vue";
 import { injectStrict, STATUS_ALERTS_MODULE_KEY } from "@/utils/inject";
 import { useAppStoreRefs } from "@data-app";
 import { mdiAlert, mdiMenu, mdiQrcode } from "@icons/material";
-import { computed, onMounted } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useDisplay } from "vuetify";
 
-defineProps({
+const SCROLL_THRESHOLD = 100;
+const SCROLL_DISTANCE = 10;
+const isFixed = ref(false);
+let lastScrollY = window.scrollY;
+
+const handleScroll = () => {
+	if (props.sidebarExpanded) {
+		isFixed.value = false;
+		lastScrollY = window.scrollY;
+		return;
+	}
+	const currentScrollY = window.scrollY;
+	const scrollDistance = Math.abs(currentScrollY - lastScrollY);
+
+	if (currentScrollY <= 0) {
+		isFixed.value = false;
+	} else if (currentScrollY < lastScrollY && currentScrollY > SCROLL_THRESHOLD && scrollDistance > SCROLL_DISTANCE) {
+		isFixed.value = true;
+	} else if (currentScrollY > lastScrollY && currentScrollY > SCROLL_THRESHOLD && scrollDistance > SCROLL_DISTANCE) {
+		isFixed.value = false;
+	}
+	lastScrollY = currentScrollY;
+};
+
+onMounted(() => {
+	window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+	window.removeEventListener("scroll", handleScroll);
+});
+
+const props = defineProps({
 	sidebarExpanded: {
 		type: Boolean,
 		required: true,
@@ -104,6 +142,9 @@ const appBarHeight = computed(() => {
 </script>
 
 <style scoped>
+.toolbar-placeholder {
+	width: 100%;
+}
 .school-name {
 	max-width: 280px;
 	text-overflow: ellipsis;
@@ -115,4 +156,18 @@ const appBarHeight = computed(() => {
 	max-height: 40px;
 	max-width: 160px;
 }
+
+.v-toolbar {
+	background-color: #fff !important;
+}
+
+.toolbar--fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 1000;
+	opacity: 1;
+	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
+}
 </style>

src/styles/css-variables/_layout-sizes.scss

@@ -1,4 +1,4 @@
 :root {
-	--topbar-height: 64px;
+	--topbar-height: 50px;
 	--breadcrumbs-height: 22px;
 }

src/styles/global.scss

@@ -1,7 +1,5 @@
 @use "./utility/index" as *;
 @use "./css-variables/index" as *;
-
 @use "@/styles/settings.scss" as *;
 @use "vuetify" as *;
-
-@use "./scrollbar.scss" as *;
+@use "./scrollbar.scss" as *;