fix: Context menu clipping out of the window

aleksilassila · Aug 15, 2023 · 4732cc1 · 4732cc1
1 parent 7cfb813
commit 4732cc1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/lib/components/ContextMenu/ContextMenu.svelte b/src/lib/components/ContextMenu/ContextMenu.svelte
@@ -10,6 +10,7 @@
 	export let id = Symbol();
 
 	let menu: HTMLDivElement;
+	let windowWidth: number;
 
 	let fixedPosition = { x: 0, y: 0 };
 
@@ -41,7 +42,11 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleShortcuts} on:click={handleClickOutside} />
+<svelte:window
+	on:keydown={handleShortcuts}
+	on:click={handleClickOutside}
+	bind:innerWidth={windowWidth}
+/>
 <svelte:head>
 	{#if $contextMenu === id}
 		<style>
@@ -63,8 +68,12 @@
 		<div
 			class={`${position} z-50 my-2 px-1 py-1 bg-zinc-800 bg-opacity-50 rounded-lg backdrop-blur-xl flex flex-col w-max`}
 			style={position === 'fixed'
-				? `left: ${fixedPosition.x}px; top: ${fixedPosition.y}px;`
-				: 'left: 0px;'}
+				? `left: ${
+						fixedPosition.x - (fixedPosition.x > windowWidth / 2 ? menu?.clientWidth : 0)
+				  }px; top: ${fixedPosition.y}px;`
+				: menu?.getBoundingClientRect()?.left > windowWidth / 2
+				? 'right: 0;'
+				: 'left: 0;'}
 			bind:this={menu}
 			in:fly|global={{ y: 5, duration: 100, delay: anchored ? 0 : 100 }}
 			out:fly|global={{ y: 5, duration: 100 }}

diff --git a/src/lib/components/TitlePageLayout/TitlePageLayout.svelte b/src/lib/components/TitlePageLayout/TitlePageLayout.svelte
@@ -79,7 +79,7 @@
 				</IconButton>
 			</a>
 			<div class="absolute top-8 left-4 sm:left-8 z-10">
-				<button class="flex items-center sm:hidden" on:click={handleCloseModal}>
+				<button class="flex items-center sm:hidden font-medium" on:click={handleCloseModal}>
 					<ChevronLeft size={20} />
 					Back
 				</button>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { env } from '$env/dynamic/public';
 	import DynamicModal from '$lib/components/Modal/DynamicModal.svelte';
 	import Navbar from '$lib/components/Navbar/Navbar.svelte';
-	import SetupRequired from '$lib/components/SetupRequired/SetupRequired.svelte';
 	import UpdateChecker from '$lib/components/UpdateChecker.svelte';
 	import '../app.css';
 	import type { LayoutData } from './$types';

diff --git a/src/routes/series/[id]/SeriesPage.svelte b/src/routes/series/[id]/SeriesPage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type JellyfinItem } from '$lib/apis/jellyfin/jellyfinApi';
+	import type { JellyfinItem } from '$lib/apis/jellyfin/jellyfinApi';
 	import { addSeriesToSonarr, sonarrAvailable } from '$lib/apis/sonarr/sonarrApi';
 	import {
 		getTmdbSeries,