Improved tooltip positioning and sizing, in particular for stashing (heart).

components/stashes/heart.vue

@@ -248,6 +248,8 @@ async function reloadStashes(newStash) {
 			v-if="itemStashes && (showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id))"
 			:aria-id="stashMenuDropdownId"
 			:shown="showStashes"
+			placement="auto"
+			popper-class="no-outer-scroll"
 			@hide="showStashes = false"
 		>
 			<Icon
@@ -274,6 +276,8 @@ async function reloadStashes(newStash) {
 			:triggers="[]"
 			:shown="showStashes"
 			:disabled="showSecondary"
+			placement="auto"
+			popper-class="no-outer-scroll"
 			@hide="showStashes = false"
 		>
 			<template v-if="pageStash?.user.id === user.id">

components/stashes/menu.vue

@@ -16,40 +16,53 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 </script>
 
 <template>
-	<ul class="stash-menu nolist noselect">
-		<li
-			v-for="userStash in stashes"
-			:key="`stash-${userStash.id}`"
-			class="menu-item"
-		>
-			<label class="menu-stash">
-				<Checkbox
-					:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
-					@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
-				/>{{ userStash.name }}
-			</label>
-		</li>
-
-		<li class="menu-item create">
-			<label
-				v-close-popper
-				class="menu-stash"
-				@click="emit('create')"
+	<div class="stash-menu noselect">
+		<ul class="stash-list nolist noselect">
+			<li
+				v-for="userStash in stashes"
+				:key="`stash-${userStash.id}`"
+				class="menu-item"
 			>
-				<Icon icon="plus3" />
-				New
-			</label>
-		</li>
-	</ul>
+				<label class="menu-stash">
+					<Checkbox
+						:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
+						@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
+					/>{{ userStash.name }}
+				</label>
+			</li>
+		</ul>
+
+		<div
+			v-close-popper
+			class="menu-item menu-stash create"
+			@click="emit('create')"
+		>
+			<Icon icon="plus3" />
+			New
+		</div>
+	</div>
 </template>
 
 <style scoped>
+.stash-menu {
+	display: flex;
+	flex-direction: column;
+	max-height: inherit;
+	overflow: hidden;
+}
+
+.stash-list {
+	overflow-y: auto;
+	min-height: 0; /* lets this flex child actually shrink and scroll instead of pushing the container taller */
+}
+
 .menu-item {
 	display: flex;
 
 	.icon {
 		fill: var(--shadow-weak-10);
 		padding: 0 .55rem 0 .2rem;
+		transform: translateY(-1px);
 	}
 }
 
@@ -58,6 +71,7 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 	width: 100%;
 	align-items: center;
 	padding: .5rem;
+	box-sizing: border-box;
 
 	&:hover {
 		cursor: pointer;
@@ -71,5 +85,10 @@ const emit = defineEmits(['stash', 'unstash', 'create']);
 	.check-container {
 		margin-right: .5rem;
 	}
+
+	&.create {
+		flex-shrink: 0;
+		border-top: 1px solid var(--glass-weak-40);
+	}
 }
 </style>