+2 -2

src/routes/(app)/embed/preview/+page.svelte

reviewed

··· 10 10 const sizes = [ 11 11 { label: '300 × 150', width: 300, height: 150 }, 12 12 { label: '400 × 200', width: 400, height: 200 }, 13 13 - { label: '600 × 400', width: 600, height: 400 } 13 13 + { label: '600 × 300', width: 600, height: 300 } 14 14 ]; 15 15 16 16 let selectedSize = $state(sizes[1]); ··· 121 121 height={selectedSize.height} 122 122 title="Embed preview" 123 123 class="rounded-lg" 124 124 - sandbox="allow-scripts allow-same-origin" 124 124 + sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" 125 125 ></iframe> 126 126 </div> 127 127 </div>

+11 -11

src/routes/embed/p/[actor]/e/[rkey]/+page.svelte

reviewed

··· 123 123 <script src="https://atmo.social/embed-sdk.js"></script> 124 124 </svelte:head> 125 125 126 126 - <div class="@container bg-base-200 dark:bg-base-950/50 text-base-900 dark:text-base-50 flex h-full items-center gap-4 overflow-hidden p-3 @sm:gap-5 @sm:p-4 @lg:gap-8 @lg:p-6"> 126 126 + <div class="@container bg-base-200 dark:bg-base-950/50 text-base-900 dark:text-base-50 flex h-full items-center gap-4.5 overflow-hidden px-5 py-3 @sm:gap-5 @sm:px-6 @sm:py-4 @lg:gap-8 @lg:px-8 @lg:py-6"> 127 127 <!-- Thumbnail --> 128 128 <a href={eventUrl} target="_blank" rel="noopener noreferrer" class="shrink-0"> 129 129 - <div class="aspect-square h-[calc(100cqh-1.5rem)] max-h-40 overflow-hidden rounded-xl @sm:h-[calc(100cqh-2rem)] @sm:rounded-2xl @lg:h-[calc(100cqh-3rem)] @lg:max-h-56"> 129 129 + <div class="aspect-square h-[calc(90cqh-1.5rem)] max-h-36 overflow-hidden rounded-xl @sm:h-[calc(90cqh-2rem)] @sm:rounded-2xl @lg:h-[calc(90cqh-3rem)] @lg:max-h-48"> 130 130 {#if data.thumbnailUrl} 131 131 <img 132 132 src={data.thumbnailUrl} ··· 148 148 </a> 149 149 150 150 <!-- Details + RSVP --> 151 151 - <div class="flex min-w-0 flex-1 flex-col justify-center gap-1 @sm:gap-1.5 @lg:gap-3"> 151 151 + <div class="flex min-w-0 flex-1 flex-col justify-center gap-2 @sm:gap-3 @lg:gap-4"> 152 152 <a href={eventUrl} target="_blank" rel="noopener noreferrer" class="min-w-0"> 153 153 <h2 class="line-clamp-2 text-xs leading-snug font-semibold @sm:text-base @lg:text-xl">{data.eventData.name}</h2> 154 154 - <p class="text-base-500 dark:text-base-400 mt-0.5 truncate text-[11px] @sm:mt-1 @sm:text-sm @lg:text-base"> 154 154 + <p class="text-base-500 dark:text-base-400 mt-1 truncate text-[11px] @sm:mt-1.5 @sm:text-sm @lg:mt-2 @lg:text-base"> 155 155 {formatDate(startDate)}, {formatTime(startDate)}{#if endDate && isSameDay} - {formatTime(endDate)}{/if} 156 156 </p> 157 157 {#if location} 158 158 <p class="text-base-500 dark:text-base-400 truncate text-[11px] @sm:text-sm @lg:text-base">{location}</p> 159 159 - {/if} 160 160 - {#if data.hostProfile} 161 161 - <p class="text-base-400 dark:text-base-500 truncate text-[11px] @sm:text-sm @lg:text-base"> 162 162 - by {data.hostProfile.displayName || data.hostProfile.handle || data.actorDid} 163 163 - </p> 164 159 {/if} 165 160 </a> 166 161 ··· 209 204 <button 210 205 onclick={() => submitRsvp('interested')} 211 206 disabled={submitting} 212 212 - class="bg-base-300 dark:bg-base-800 hover:bg-base-400 dark:hover:bg-base-700 text-base-700 dark:text-base-300 flex-1 cursor-pointer rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors disabled:opacity-50 @sm:rounded-lg @sm:px-4 @sm:py-1.5 @sm:text-sm @lg:px-5 @lg:py-2 @lg:text-base" 213 213 - >Interested</button> 207 207 + class="bg-base-300 dark:bg-base-800 hover:bg-base-400 dark:hover:bg-base-700 text-base-700 dark:text-base-300 cursor-pointer rounded-md px-2 py-1 transition-colors disabled:opacity-50 @sm:flex-1 @sm:rounded-lg @sm:px-4 @sm:py-1.5 @sm:text-sm @lg:px-5 @lg:py-2 @lg:text-base" 208 208 + > 209 209 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5 @sm:hidden"> 210 210 + <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" /> 211 211 + </svg> 212 212 + <span class="hidden text-[11px] font-medium @sm:inline @sm:text-sm @lg:text-base">Interested</span> 213 213 + </button> 214 214 </div> 215 215 {/if} 216 216 </div>