From 515380b4773cccd765316f3fafa72a0c0738d8d9 Mon Sep 17 00:00:00 2001
From: kubgus <ja.gustafik@outlook.sk>
Date: Mon, 9 Sep 2024 14:14:02 +0200
Subject: [PATCH] Fix picture frame stretching and text alignment

---
 src/components/picture-frame.astro | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/picture-frame.astro b/src/components/picture-frame.astro
index 025c014..7d4ff06 100644
--- a/src/components/picture-frame.astro
+++ b/src/components/picture-frame.astro
@@ -48,6 +48,11 @@ const { data } = Astro.props;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        text-align: center;
+        width: clamp(15rem, 50vw, 20rem);
+        height: max(15rem, 25vh);
+
+        padding: 0.5rem;
 
         display: flex;
         flex-direction: column;
@@ -55,8 +60,6 @@ const { data } = Astro.props;
         justify-content: center;
         gap: 1rem;
 
-        padding: 2rem 5rem;
-
         background: var(--background-dark);
         color: inherit;
 
@@ -64,7 +67,7 @@ const { data } = Astro.props;
         border-radius: 12px;
     }
 
-    .popover:popover-open > img {
+    .popover img {
         width: 90px !important;
         height: 90px !important;
 
@@ -73,10 +76,13 @@ const { data } = Astro.props;
         background: var(--secondary-background-dark);
         border-radius: 12px;
 
-        animation: fadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
 
-    @keyframes fadeIn {
+    .popover:popover-open img {
+        animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    @keyframes popIn {
         from {
             scale: 0.5;
         }