@axium/client 0.31.0 → 0.31.1

package/assets/styles.css

@@ -474,4 +474,39 @@ div.toast {
 		z-index: 4;
 		font-size: 1.25em;
 	}
+
+	:popover-open {
+		position: fixed;
+		width: 100%;
+		max-width: 100%;
+		max-height: 80dvh;
+		overflow-y: auto;
+		border: none;
+		gap: 0.25em;
+
+		&:not(.mobile-top) {
+			inset: auto 0 0 0 !important;
+			border-top: var(--border-elevated);
+			border-radius: 1em 1em 0 0;
+			padding: 0.5em 0.5em calc(0.5em + env(safe-area-inset-bottom, 0px));
+		}
+
+		&.mobile-top {
+			inset: 0 0 auto 0 !important;
+			border-bottom: var(--border-elevated);
+			border-radius: 0 0 1em 1em;
+			padding: calc(0.5em + env(safe-area-inset-top, 0px)) 0.5em 0.5em;
+		}
+
+		.menu-item {
+			padding: 1em;
+			font-size: 1.05em;
+			border-radius: 0.75em;
+		}
+
+		.menu-header {
+			padding: 0.75em 1em 0.5em;
+			font-size: 1em;
+		}
+	}
 }

package/dist/gui/index.d.ts

@@ -1,3 +1,4 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './mobile.js';

package/dist/gui/index.js

@@ -1,3 +1,4 @@
 export * from './animate.js';
 export * from './clipboard.js';
 export * as controls from './controls.js';
+export * from './mobile.js';

package/dist/gui/mobile.d.ts

@@ -0,0 +1 @@
+export declare function isMobile(): boolean;

package/dist/gui/mobile.js

@@ -0,0 +1,4 @@
+const width = matchMedia('(width <= 700px)');
+export function isMobile() {
+    return width.matches;
+}

package/lib/Popover.svelte

@@ -66,16 +66,16 @@
 		:global(:hover:has(:hover > .Popover > .toggle-hover)) > div > .toggle-hover:not(.cascade-hover) {
 			visibility: hidden;
 		}
-	}
 
-	:popover-open {
-		position-anchor: --popover;
-		position-try-fallbacks:
-			flip-inline,
-			flip-block,
-			flip-block flip-inline;
-		position-visibility: always;
-		left: anchor(left);
-		top: anchor(bottom);
+		:popover-open {
+			position-anchor: --popover;
+			position-try-fallbacks:
+				flip-inline,
+				flip-block,
+				flip-block flip-inline;
+			position-visibility: always;
+			left: anchor(left);
+			top: anchor(bottom);
+		}
 	}
 </style>

package/lib/UserMenu.svelte

@@ -10,7 +10,7 @@
 </script>
 
 {#if user}
-	<Popover>
+	<Popover class="mobile-top">
 		{#snippet toggle()}
 			<div class="UserMenu toggle">
 				<UserPFP {user} />
@@ -79,12 +79,15 @@
 	}
 
 	:global(.UserMenu + div:popover-open) {
-		position: fixed;
-		left: unset;
-		right: anchor(right);
-		top: calc(anchor(bottom) + 0.5em);
-		width: fit-content;
-		height: fit-content;
 		cursor: default;
+
+		@media (width > 700px) {
+			position: fixed;
+			left: unset;
+			right: anchor(right);
+			top: calc(anchor(bottom) + 0.5em);
+			width: fit-content;
+			height: fit-content;
+		}
 	}
 </style>

package/lib/attachments/context-menu.ts

@@ -1,3 +1,4 @@
+import { isMobile } from '@axium/client/gui';
 import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';
@@ -86,6 +87,8 @@ export function contextMenu(...menuItems: ContextMenuEntry[] | [() => ContextMen
 			menu.showPopover();
 			_forcePopover = true;
 
+			if (isMobile()) return;
+
 			const x = e.clientX;
 			const y = e.clientY;
 

package/lib/attachments/drag-and-drop.ts

@@ -1,4 +1,4 @@
-import { mount, unmount, type Component } from 'svelte';
+import { mount, unmount } from 'svelte';
 import type { Attachment } from 'svelte/attachments';
 import Icon from '../Icon.svelte';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.31.0",
+	"version": "0.31.1",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",
@@ -40,7 +40,10 @@
 		"./toast": "./lib/toast.js",
 		"./attachments": "./lib/attachments/index.js",
 		"./reactive": "./lib/reactive/index.svelte.js",
-		"./styles/*": "./styles/*.css"
+		"./styles/*": {
+			"types": "./styles/styles.d.ts",
+			"default": "./styles/*.css"
+		}
 	},
 	"scripts": {
 		"build": "tsc"

package/styles/styles.d.ts

@@ -0,0 +1 @@
+declare module '@axium/client/styles/*';