Use less blur on small placeholder images

package.json

@@ -13,6 +13,7 @@
     "@aws-sdk/s3-request-presigner": "3.521.0",
     "@next/bundle-analyzer": "14.1.0",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   '@radix-ui/react-dropdown-menu':
     specifier: ^2.0.6
     version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.58)(react-dom@18.2.0)(react@18.2.0)
+  '@tailwindcss/container-queries':
+    specifier: ^0.1.1
+    version: 0.1.1(tailwindcss@3.4.1)
   '@tailwindcss/forms':
     specifier: ^0.5.7
     version: 0.5.7(tailwindcss@3.4.1)
@@ -2867,6 +2870,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+    dependencies:
+      tailwindcss: 3.4.1
+    dev: false
+
   /@tailwindcss/forms@0.5.7(tailwindcss@3.4.1):
     resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
     peerDependencies:

src/components/ImageBlurFallback.tsx

@@ -54,6 +54,7 @@ export default function ImageBlurFallback(props: ImageProps) {
     >
       {showPlaceholder &&
         <div className={clsx(
+          '@container',
           'absolute inset-0',
           'bg-main overflow-hidden',
           'transition-opacity duration-300 ease-in',
@@ -66,13 +67,13 @@ export default function ImageBlurFallback(props: ImageProps) {
               className: clsx(
                 imageClassName,
                 // Fix poorly blurred placeholder data generated by Safari
-                'blur-md scale-105',
+                'blur-sm @xs:blue-md scale-105',
               ),
             }} />
             :  <div className={clsx(
               'w-full h-full',
               'bg-gray-100/50 dark:bg-gray-900/50',
-            )}/>}
+            )} />}
         </div>}
       <Image {...{
         ...rest,

tailwind.config.js

@@ -42,5 +42,6 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/container-queries'),
   ],
 };