1  <script lang="ts">
 2  	import type { MastodonAccount } from '$lib/mastodon';
 3  	import { Modal, Button } from 'svelte-akui';
 4  	import Avatar from './Avatar.svelte';
 5  
 6  	let { account, onClose }: { account: MastodonAccount; onClose: () => void } = $props();
 7  </script>
 8  
 9  <Modal {onClose} showCloseButton={false} fullscreenOnMobile={true}>
10  	<div class="fk-avatar-zoom">
11  		<Avatar 
12  			src={account.avatar} 
13  			alt={account.display_name || account.username} 
14  			size={1024} 
15  			class="fk-avatar-zoom__image"
16  		/>
17  	</div>
18  
19  	{#snippet footer()}
20  		<Button label="Close" variant="regular" onclick={onClose} />
21  	{/snippet}
22  </Modal>
23  
24  <style>
25  	.fk-avatar-zoom {
26  		width: 100%;
27  		display: flex;
28  		align-items: center;
29  		justify-content: center;
30  		background: var(--akui-bg);
31  		/* The modal body has no padding, so this fills the space */
32  		aspect-ratio: 1 / 1;
33  		overflow: hidden;
34  	}
35  
36  	:global(.fk-avatar-zoom__image) {
37  		width: 100% !important;
38  		height: 100% !important;
39  		max-width: none !important;
40  		border-radius: 0 !important;
41  	}
42  </style>