Tooltips respect left and right content borders

pages/profile/watching.scarlet

@@ -2,6 +2,12 @@
 	horizontal-wrap
 	justify-content center
 
+	// CSS grid variant:
+	// display grid
+	// grid-gap 0.5rem
+	// grid-template-columns repeat(auto-fill, 55px)
+	// justify-content center
+
 .profile-watching-list-item
 	anime-mini-item
 

scripts/AnimeNotifier.ts

@@ -158,6 +158,7 @@ export default class AnimeNotifier {
 			Promise.resolve().then(() => this.assignActions()),
 			Promise.resolve().then(() => this.updatePushUI()),
 			Promise.resolve().then(() => this.dragAndDrop()),
+			Promise.resolve().then(() => this.assignTooltipOffsets()),
 			Promise.resolve().then(() => this.colorStripes()),
 			Promise.resolve().then(() => this.countUp())
 		])
@@ -236,6 +237,40 @@ export default class AnimeNotifier {
 		}
 	}
 
+	assignTooltipOffsets() {
+		let contentRect = this.app.content.getBoundingClientRect()
+
+		for(let element of findAll("tip")) {
+			Diff.mutations.queue(() => {
+				let rect = element.getBoundingClientRect()
+				let tipStyle = window.getComputedStyle(element, ":before")
+				let tipWidth = parseInt(tipStyle.width) + parseInt(tipStyle.paddingLeft) * 2
+				let tipStartX = rect.left + rect.width / 2 - tipWidth / 2 - contentRect.left
+				let tipEndX = tipStartX + tipWidth
+				let leftOffset = 0
+
+				if(tipStartX < 0) {
+					leftOffset = -tipStartX + 5
+				} else if(tipEndX > contentRect.width) {
+					leftOffset = -(tipEndX - contentRect.width + 5)
+				}
+
+				if(leftOffset !== 0) {
+					element.classList.remove("tip")
+					element.classList.add("tip-offset-root")
+
+					let tipChild = document.createElement("div")
+					tipChild.classList.add("tip-offset-child")
+					tipChild.setAttribute("aria-label", element.getAttribute("aria-label"))
+					tipChild.style.left = leftOffset + "px"
+					tipChild.style.width = rect.width + "px"
+					tipChild.style.height = rect.height + "px"
+					element.appendChild(tipChild)
+				}
+			})
+		}
+	}
+
 	dragAndDrop() {
 		for(let element of findAll("inventory-slot")) {
 			// Skip elements that have their event listeners attached already

scripts/AudioPlayer.ts

@@ -41,6 +41,11 @@ export default class AudioPlayer {
 
 	// Play audio file
 	play(trackId: string, trackUrl: string) {
+		if(typeof AudioContext === "undefined") {
+			alert("Your browser doesn't support web audio!")
+			return
+		}
+
 		if(!this.audioContext) {
 			this.audioContext = new AudioContext()
 			this.gainNode = this.audioContext.createGain()

styles/mixins/anime-grid.scarlet

@@ -1,5 +1,6 @@
 mixin anime-mini-item
 	margin 0.25rem
+	flex-basis anime-image-small-width
 
 mixin anime-generic-item-image
 	object-fit cover

styles/tip.scarlet

@@ -2,10 +2,7 @@ const tip-opacity = 0.94
 const tip-transform-hidden = rotate(0.02deg) translateX(-50%) translateY(-80%)
 const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
 
-.tip
-	position relative
-
-	:before
+mixin tip-before
 	content attr(aria-label)
 	position absolute
 	top -10px
@@ -25,7 +22,7 @@ const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
 	white-space nowrap
 	default-transition
 
-	:after
+mixin tip-after
 	content ""
 	position absolute
 	top -4px
@@ -41,6 +38,21 @@ const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
 	transform tip-transform-hidden
 	default-transition
 
+.tip-offset-child
+	position absolute !important
+	left 0
+	top 0
+	pointer-events none
+
+.tip
+	position relative
+
+	:before
+		tip-before
+
+	:after
+		tip-after
+
 	:hover
 		:before
 			opacity tip-opacity
@@ -49,3 +61,23 @@ const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
 		:after
 			opacity tip-opacity
 			transform tip-transform-visible
+
+.tip-offset-root
+	position relative
+
+	:after
+		tip-after
+
+	.tip-offset-child
+		:before
+			tip-before
+
+	:hover
+		:after
+			opacity tip-opacity
+			transform tip-transform-visible
+
+		.tip-offset-child
+			:before
+				opacity tip-opacity
+				transform tip-transform-visible