🚸 ux(matrix-web): improve mobile responsiveness

- Add slide-in sidebar overlay with backdrop on mobile
- Make message actions appear below message on mobile
- Adjust emoji picker positioning for viewport awareness
- Reduce excessive padding on mobile screens
- Hide disabled call buttons on small screens
- Add responsive widths to panels and dialogs
- Close sidebar automatically when selecting room on mobile

packages/shared-drizzle-config/package.json

@@ -19,6 +19,7 @@
 		"drizzle-kit": "^0.30.4"
 	},
 	"devDependencies": {
+		"@types/node": "^22.10.2",
 		"typescript": "^5.7.2"
 	},
 	"peerDependencies": {

packages/shared-ui/src/molecules/loaders/SkeletonList.svelte

@@ -10,6 +10,7 @@
 	 */
 
 	import SkeletonRow from './SkeletonRow.svelte';
+	import { calculateFadeOpacity } from './utils';
 
 	interface Props {
 		/** Number of rows to show */
@@ -38,15 +39,13 @@
 		class: className = '',
 	}: Props = $props();
 
-	function calculateOpacity(index: number): number {
-		if (!fadeEffect) return 1;
-		const fadeStep = (1 - minOpacity) / Math.max(count - 1, 1);
-		return Math.max(minOpacity, 1 - index * fadeStep);
+	function getOpacity(index: number): number {
+		return fadeEffect ? calculateFadeOpacity(index, count, minOpacity) : 1;
 	}
 </script>
 
 <div class="skeleton-list flex flex-col {className}" style="gap: {gap};">
 	{#each Array(count) as _, i}
-		<SkeletonRow {showAvatar} {avatarSize} opacity={calculateOpacity(i)} />
+		<SkeletonRow {showAvatar} {avatarSize} opacity={getOpacity(i)} />
 	{/each}
 </div>

packages/shared-ui/src/molecules/loaders/index.ts

@@ -29,3 +29,6 @@ export { default as SkeletonGrid } from './SkeletonGrid.svelte';
 
 // Full Page
 export { default as AppLoadingSkeleton } from './AppLoadingSkeleton.svelte';
+
+// Utilities
+export { calculateFadeOpacity } from './utils';

packages/shared-ui/src/molecules/loaders/utils.ts

@@ -0,0 +1,30 @@
+/**
+ * Skeleton utility functions
+ */
+
+/**
+ * Calculate opacity for cascading fade effect in skeleton lists
+ *
+ * Creates a smooth fade from 1 at the first item to minOpacity at the last item.
+ *
+ * @param index Current item index (0-based)
+ * @param count Total number of items
+ * @param minOpacity Minimum opacity at the last item (default: 0.3)
+ * @returns Opacity value between minOpacity and 1
+ *
+ * @example
+ * ```ts
+ * // For a list of 5 items with minOpacity 0.3:
+ * // index 0 → 1.0
+ * // index 1 → 0.825
+ * // index 2 → 0.65
+ * // index 3 → 0.475
+ * // index 4 → 0.3
+ * calculateFadeOpacity(0, 5, 0.3) // 1.0
+ * calculateFadeOpacity(4, 5, 0.3) // 0.3
+ * ```
+ */
+export function calculateFadeOpacity(index: number, count: number, minOpacity = 0.3): number {
+	const fadeStep = (1 - minOpacity) / Math.max(count - 1, 1);
+	return Math.max(minOpacity, 1 - index * fadeStep);
+}