fix: Text Story UI positioning, Fact Image heading background alignment

modules/fact_image/services/text_overlay.py

@@ -221,19 +221,32 @@ class TextOverlay:
         # Draw heading with background (UPPERCASE)
         if heading:
             heading_upper = heading.upper()  # Convert to UPPERCASE
+            # Get text bounding box - returns (left, top, right, bottom)
             heading_bbox = draw.textbbox((0, 0), heading_upper, font=heading_font)
+            # The bbox includes font metrics offset
+            text_y_offset = heading_bbox[1]  # Top offset from baseline
             heading_width = heading_bbox[2] - heading_bbox[0]
             heading_height = heading_bbox[3] - heading_bbox[1]
             heading_x = (self.TARGET_WIDTH - heading_width) // 2
             
-            # Draw background if enabled
-            if heading_background and heading_background.get('enabled', True):
-                bg_color = self._parse_rgba(heading_background.get('color', 'rgba(255, 109, 128, 0.95)'))
+            # Draw background - ALWAYS show when heading exists
+            show_bg = True
+            if heading_background and heading_background.get('enabled') is False:
+                show_bg = False
+            
+            if show_bg:
+                # Get color from config or use default coral
+                if heading_background and heading_background.get('color'):
+                    bg_color = self._parse_rgba(heading_background.get('color'))
+                else:
+                    bg_color = (255, 109, 128, 242)  # Default coral color with 95% opacity
                 
+                # Background position - account for text_y_offset to align with actual text
+                actual_text_y = current_y + text_y_offset
                 bg_x1 = heading_x - heading_bg_padding
-                bg_y1 = current_y - heading_bg_padding // 2
+                bg_y1 = actual_text_y - heading_bg_padding
                 bg_x2 = heading_x + heading_width + heading_bg_padding
-                bg_y2 = current_y + heading_height + heading_bg_padding // 2
+                bg_y2 = actual_text_y + heading_height + heading_bg_padding
                 
                 self._draw_rounded_rect(
                     draw,

modules/text_story/services/renderer.py

@@ -26,12 +26,12 @@ CANVAS_HEIGHT = 1920
 # - Small avatar next to other person's messages
 
 LAYOUT = {
-    "top_margin": 180,            # Space at top for floating effect
-    "side_margin": 25,            # Side margins left/right (narrower for messenger look)
-    "chat_box_width": 1030,       # Width of chat card
-    "chat_box_radius": 35,        # Rounded corners (more rounded like screenshot)
+    "top_margin": 670,            # 35% from top (1920 * 0.35)
+    "side_margin": 50,            # More side margin (left/right)
+    "chat_box_width": 980,        # Narrower card (1080 - 50*2)
+    "chat_box_radius": 35,        # Rounded corners
     "header_height": 100,         # Header with avatar + name + status
-    "max_chat_height": 1200,      # Maximum height of entire chat box
+    "max_chat_height": 1100,      # Maximum height of chat box
 }
 
 # Colors (Facebook Messenger - exact from screenshot)
@@ -261,12 +261,13 @@ class ChatRenderer:
             font=self.font_small
         )
         
-        # Icons on right (phone, video, info)
-        right_x = x_offset + LAYOUT["chat_box_width"] - 130
+        # Icons on right (phone, video, info) - using Unicode symbols
+        right_x = x_offset + LAYOUT["chat_box_width"] - 100
         icon_y = y_start + 35
-        draw.text((right_x, icon_y), "📞", fill=COLORS["text_blue"], font=self.font_small)
-        draw.text((right_x + 45, icon_y), "📹", fill=COLORS["text_blue"], font=self.font_small)
-        draw.text((right_x + 90, icon_y), "ⓘ", fill=COLORS["text_blue"], font=self.font_small)
+        # Use filled circles as icon placeholders (compatible with all fonts)
+        draw.ellipse([right_x, icon_y + 5, right_x + 22, icon_y + 27], fill=COLORS["text_blue"])
+        draw.ellipse([right_x + 35, icon_y + 5, right_x + 57, icon_y + 27], fill=COLORS["text_blue"])
+        draw.ellipse([right_x + 70, icon_y + 5, right_x + 92, icon_y + 27], fill=COLORS["text_blue"])
     
     def _draw_bubble(self, draw: ImageDraw.Draw, 
                      x: int, y: int,