limit blink image height to it's container width

zhelezkov · zhelezkov · commit 1fe92cc026f9 · 2024-07-22T19:56:29.000+03:00
diff --git a/src/index.css b/src/index.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.blink {
+  container-type: inline-size;
+}
+
 @layer base {
   .dial-light {
     --blink-bg-primary: #ffffff;
diff --git a/src/ui/ActionLayout.tsx b/src/ui/ActionLayout.tsx
@@ -100,7 +100,7 @@ export const ActionLayout = ({
         {image && (
           <Linkable
             url={websiteUrl}
-            className="block max-h-[500px] overflow-y-hidden px-5 pt-5"
+            className="block max-h-[100cqw] overflow-y-hidden px-5 pt-5"
           >
             <img
               className={clsx('w-full rounded-xl object-cover object-left', {

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ export const ActionLayout = ({`
`100`	`100`	`{image && (`
`101`	`101`	`<Linkable`
`102`	`102`	`url={websiteUrl}`
`103`		`- className="block max-h-[500px] overflow-y-hidden px-5 pt-5"`
	`103`	`+ className="block max-h-[100cqw] overflow-y-hidden px-5 pt-5"`
`104`	`104`	`>`
`105`	`105`	`<img`
`106`	`106`	`className={clsx('w-full rounded-xl object-cover object-left', {`