fix: popup size behavior changed to control by class

src/components/common/Popup.astro

@@ -1,6 +1,8 @@
 ---
+import { cn } from '@/lib/utils';
+
 /**
- * Popup Component - Fancy containers that actually work
+ * Popup Component
  * 
  * @example
  * ```astro
@@ -58,7 +60,7 @@ export interface Props {
 const { 
   size = 'large', 
   color = 'black',
-  class: className = ''
+  class: additionalClasses = ''
 } = Astro.props;
 
 // Configuration based on size
@@ -82,31 +84,29 @@ const borderSvg = `/images/popup-borders/popup-border-${size}-${color}.svg`;
 ---
 
 <div 
-  class={`popup-container relative w-full ${className}`}
+  class="popup-container w-screen"
   data-size={size}
   style={`
+    position: relative;
     aspect-ratio: ${config.aspectRatio};
     min-height: ${config.minHeight};
   `}
 >
-  <!-- Background with border SVG -->
-  <div 
-    class="absolute inset-0 bg-contain bg-center bg-no-repeat"
-    style={`background-image: url('${borderSvg}'); background-size: 100% 100%;`}
-  ></div>
 
-  <!-- Content area positioned within SVG bounds with proper clipping -->
+  <img 
+    src={borderSvg}
+    alt=""
+    class="absolute inset-0 w-full h-full object-contain"
+  />
+
+  <!-- Content Area -->
   <div 
-    class="absolute flex items-center justify-center content-area popup-content-clip"
+    class="absolute inset-0 z-10"
     style={`
-      left: 50%;
-      top: 50%;
-      width: ${config.contentWidth};
-      height: ${config.contentHeight};
-      transform: translate(-50%, -50%);
+      padding: ${size === 'large' ? '15%' : '12%'};
     `}
   >
-    <div class="text-center w-full px-4 h-full overflow-y-auto">
+    <div class={cn("w-full h-full overflow-hidden", additionalClasses)}>
       <slot />
     </div>
   </div>
@@ -191,4 +191,4 @@ const borderSvg = `/images/popup-borders/popup-border-${size}-${color}.svg`;
       margin: 0.5% !important;
     }
   }
-</style>
+</style>