Merge pull request #10 from bhagyamudgal/bhagyamudgal/fix-aspect-ratio-with-max-height

style: fix aspect ratio with max height

Author: zhelezkov

src/index.css

@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer base {
+  .blink {
+    container-type: inline-size;
+  }  
+
   .dial-light {
     --blink-bg-primary: #ffffff;
     --blink-button: #2a2a2b;

src/ui/ActionLayout.tsx

@@ -182,12 +182,14 @@ export const ActionLayout = ({
     <div className={clsx('blink', stylePresetClassMap[stylePreset])}>
       <div className="w-full cursor-default overflow-hidden rounded-2xl border border-stroke-primary bg-bg-primary shadow-action">
         {image && (
-          <Linkable url={websiteUrl} className="block px-5 pt-5">
+          <Linkable
+            url={websiteUrl}
+            className="block max-h-[100cqw] overflow-y-hidden px-5 pt-5"
+          >
             <img
-              className={clsx('w-full rounded-xl object-cover object-left', {
-                'aspect-square': !form,
-                'aspect-[2/1]': form,
-              })}
+              className={clsx(
+                'aspect-auto w-full rounded-xl object-cover object-center',
+              )}
               src={image}
               alt="action-image"
             />