Size content grids to their container instead of the window

src/app/components/NoteContentClassified.svelte

@@ -14,7 +14,7 @@
   const price = $derived(classified.price())
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="@container flex flex-col gap-2">
   {#if title}
     <p class="text-xl">
       {title} —
@@ -24,7 +24,7 @@
   {#if props.event.content}
     <Content {...props} />
   {/if}
-  <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9 gap-2">
+  <div class="grid grid-cols-3 gap-2 @md:grid-cols-5 @2xl:grid-cols-9">
     {#each images as image, i (i + image)}
       <ContentLinkBlock event={props.event} value={{url: image}} />
     {/each}

src/app/components/NoteContentMinimalEventTime.svelte

@@ -16,7 +16,7 @@
   const end = $derived(parseInt(meta.end))
 </script>
 
-<div class="flex flex-col">
+<div class="@container flex flex-col">
   <div class="flex grow flex-wrap justify-between gap-2">
     <p class="text-sm">{meta.title || meta.name}</p>
     {#if !isNaN(start) && !isNaN(end)}
@@ -25,7 +25,7 @@
       {@const isSingleDay = startDateDisplay === endDateDisplay}
       <div class="flex items-center gap-2">
         <Icon icon={ClockCircle} size={4} />
-        <span class="hidden sm:block">{formatTimestampAsDate(start)}</span>
+        <span class="hidden @sm:block">{formatTimestampAsDate(start)}</span>
         {formatTimestampAsTime(start)} — {isSingleDay
           ? formatTimestampAsTime(end)
           : formatTimestamp(end)}

src/routes/spaces/[relay]/classifieds/+page.svelte

@@ -137,7 +137,7 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element class="flex flex-col gap-3 p-2 sm:gap-4 sm:p-4">
+<PageContent bind:element class="@container flex flex-col gap-3 p-2 sm:gap-4 sm:p-4">
   {#if listings.length > 0}
     <div class="flex flex-wrap items-center gap-2">
       <label class="input flex w-auto min-w-48 grow items-center gap-2">
@@ -183,7 +183,7 @@
       {/if}
     </div>
   {/if}
-  <div class="grid gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 2xl:grid-cols-4">
+  <div class="grid gap-3 @2xl:grid-cols-2 @2xl:gap-4 @4xl:grid-cols-3 @7xl:grid-cols-4">
     {#each items as event (event.id)}
       <div in:fly class="h-full min-w-0">
         <ClassifiedItem {url} {context} event={$state.snapshot(event)} />

src/routes/spaces/[relay]/directory/+page.svelte

@@ -135,7 +135,7 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent class="flex flex-col gap-4 p-4">
+<PageContent class="@container flex flex-col gap-4 p-4">
   <label class="input input-group flex w-full items-center gap-2 card">
     <Icon size={4} icon={Magnifier} />
     <input
@@ -147,7 +147,7 @@
   {#if visibleMembers.length === 0}
     <p class="flex flex-col items-center py-20 text-center">No members found.</p>
   {:else}
-    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
+    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-2 @5xl:grid-cols-3">
       {#each visibleMembers as { pubkey, roleList } (pubkey)}
         <SpaceMember {url} {pubkey} roles={roleList} />
       {/each}