fix: pills always render as a horizontal lozenge + a bit more top/bottom padding

- A pill is a horizontal icon/label-left, value-right lozenge; vertical
stacked pills look wrong, so pill shape now forces horizontal layout for
every image type (logos/backdrops/episodes default to vertical style).
- Give horizontal pills a little extra height for top/bottom breathing room.

README.md

@@ -128,7 +128,7 @@ GET /{api_key}/isValid
 - `?badge_style={h|v|d}`: badge layout — `h` (horizontal), `v` (vertical), `d` (default)
 - `?label_style={t|i|o}`: label rendering — `t` (text), `i` (icon), `o` (official provider logos)
 - `?badge_size={xs|s|m|l|xl}`: badge scale — extra-small, small, medium, large, extra-large
-- `?badge_shape={r|p}`: badge corner shape — `r` (rounded, default), `p` (pill, fully rounded ends)
+- `?badge_shape={r|p}`: badge corner shape — `r` (rounded, default), `p` (pill, fully rounded ends). Pills always render as a horizontal icon/label-left, value-right lozenge, even on image types whose default style is vertical (logos, backdrops, episodes)
 - `?badge_background={d|k|t|n}`: badge background — `d` (default: source-coloured label + dark value), `k` (dark: uniformly dark), `t` (transparent: semi-transparent so the artwork shows through), `n` (none: no background, label/value drawn directly on the image with a drop shadow)
 - `?image_source={t|f}`: image source — `t` (TMDB, default), `f` (Fanart.tv). Applies to all image types. The non-selected source is used as fallback
 - `?badge_direction={d|h|v}`: badge stacking direction — `d` (default), `h` (horizontal), `v` (vertical). Applies to poster, backdrop, and episode endpoints

api/src/image/badge.rs

@@ -105,6 +105,9 @@ const BASE_BADGE_RADIUS: u32 = 10;
 /// crowd the fully-rounded caps. Applied to the long-axis ends only (left/right
 /// for horizontal badges, top/bottom for vertical).
 const BASE_PILL_PADDING: u32 = 10;
+/// Extra height added to horizontal pill badges for a little more top/bottom
+/// breathing room around the content.
+const BASE_PILL_PADDING_V: u32 = 6;
 const BASE_FONT_SIZE: f32 = 34.0;
 const BASE_LABEL_FONT_SIZE: f32 = 26.0;
 const BASE_ICON_HEIGHT: u32 = 48;
@@ -164,6 +167,7 @@ struct ScaledDims {
     badge_value_padding_h: u32,
     badge_radius: u32,
     pill_padding: u32,
+    pill_padding_v: u32,
     icon_height: u32,
 }
 
@@ -176,6 +180,7 @@ impl ScaledDims {
             badge_value_padding_h: (BASE_BADGE_VALUE_PADDING_H as f32 * badge_scale).round() as u32,
             badge_radius: (BASE_BADGE_RADIUS as f32 * badge_scale).round() as u32,
             pill_padding: (BASE_PILL_PADDING as f32 * badge_scale).round() as u32,
+            pill_padding_v: (BASE_PILL_PADDING_V as f32 * badge_scale).round() as u32,
             icon_height: (BASE_ICON_HEIGHT as f32 * badge_scale).round() as u32,
         }
     }
@@ -289,26 +294,28 @@ fn render_badge_inner(
     let value_width = uniform_value_width.unwrap_or_else(|| text_width(value, &fonts.scaled));
     let label_pad = if use_icon { dims.badge_padding_h } else { dims.text_label_padding_h };
     // Pills get extra padding at their rounded left/right ends so the content
-    // doesn't crowd the fully-rounded caps. Rounded badges add nothing.
-    let pill_pad = match appearance.shape {
-        BadgeShape::Pill => dims.pill_padding,
-        BadgeShape::Rounded => 0,
+    // doesn't crowd the fully-rounded caps, plus a little extra height for
+    // top/bottom breathing room. Rounded badges add nothing.
+    let (pill_pad, pill_pad_v) = match appearance.shape {
+        BadgeShape::Pill => (dims.pill_padding, dims.pill_padding_v),
+        BadgeShape::Rounded => (0, 0),
     };
+    let badge_h = dims.badge_height + pill_pad_v;
 
     let value_x = pill_pad + label_width + label_pad * 2;
     let total_width = value_x + value_width + dims.badge_value_padding_h + dims.badge_value_padding_h / 2 + 2 + pill_pad;
-    let mut img = RgbaImage::new(total_width, dims.badge_height);
+    let mut img = RgbaImage::new(total_width, badge_h);
 
     // Draw the label + value backgrounds (unless the badge has no background).
     // Both sections are filled as plain rects, then the four outer corners are
     // rounded — leaving the inner join square for a clean seam at any radius.
     if let Some((label_bg, value_bg)) = section_colors(appearance.background, label_style, &badge.source) {
-        draw_filled_rect_mut(&mut img, Rect::at(0, 0).of_size(value_x, dims.badge_height), label_bg);
-        draw_filled_rect_mut(&mut img, Rect::at(value_x as i32, 0).of_size(total_width - value_x, dims.badge_height), value_bg);
-        round_corners(&mut img, corner_radius(appearance.shape, dims.badge_height, dims.badge_radius));
+        draw_filled_rect_mut(&mut img, Rect::at(0, 0).of_size(value_x, badge_h), label_bg);
+        draw_filled_rect_mut(&mut img, Rect::at(value_x as i32, 0).of_size(total_width - value_x, badge_h), value_bg);
+        round_corners(&mut img, corner_radius(appearance.shape, badge_h, dims.badge_radius));
     }
 
-    let shadow = shadow_offset(appearance.background, dims.badge_height);
+    let shadow = shadow_offset(appearance.background, badge_h);
 
     // Draw label (icon or text, centered within uniform label area)
     if use_icon {
@@ -319,12 +326,12 @@ fn render_badge_inner(
             imageops::resize(icon, icon_w, icon_h, imageops::FilterType::Lanczos3)
         };
         let ix = pill_pad + label_pad + (label_width.saturating_sub(icon_w)) / 2;
-        let iy = (dims.badge_height.saturating_sub(icon_h)) / 2;
+        let iy = (badge_h.saturating_sub(icon_h)) / 2;
         overlay_icon_shadowed(&mut img, &scaled_icon, ix as i64, iy as i64, shadow);
     } else {
         let actual_label_width = text_width(label, &fonts.label_scaled);
         let label_x = pill_pad + label_pad + (label_width.saturating_sub(actual_label_width)) / 2;
-        let label_y = (dims.badge_height as i32 - fonts.label_scale.x as i32) / 2;
+        let label_y = (badge_h as i32 - fonts.label_scale.x as i32) / 2;
         draw_text_shadowed(
             &mut img,
             Rgba([255, 255, 255, 255]),
@@ -340,7 +347,7 @@ fn render_badge_inner(
     // Draw value text (centered within uniform value area)
     let actual_value_width = text_width(value, &fonts.scaled);
     let value_text_x = value_x + dims.badge_value_padding_h + (value_width.saturating_sub(actual_value_width)) / 2;
-    let value_y = (dims.badge_height as i32 - fonts.scale.x as i32) / 2;
+    let value_y = (badge_h as i32 - fonts.scale.x as i32) / 2;
     draw_text_shadowed(
         &mut img,
         Rgba([255, 255, 255, 255]),
@@ -687,13 +694,17 @@ mod tests {
         for shape in ALL_SHAPES {
             for background in ALL_BACKGROUNDS {
                 let appearance = BadgeAppearance { shape, background };
-                // Horizontal: appearance must not change the badge height.
+                // Horizontal badge height: base, plus the pill's extra vertical padding.
+                let expected_h = match shape {
+                    BadgeShape::Pill => BASE_BADGE_HEIGHT + BASE_PILL_PADDING_V,
+                    BadgeShape::Rounded => BASE_BADGE_HEIGHT,
+                };
                 let h = render_badge_appearance(&badge, &font, LabelStyle::Text, appearance);
-                assert_eq!(h.height(), BASE_BADGE_HEIGHT, "h height for {shape:?}/{background:?}");
+                assert_eq!(h.height(), expected_h, "h height for {shape:?}/{background:?}");
                 assert!(h.width() > 0, "h width for {shape:?}/{background:?}");
                 // Icon labels exercise the icon/shadow path.
                 let hi = render_badge_appearance(&badge, &font, LabelStyle::Official, appearance);
-                assert_eq!(hi.height(), BASE_BADGE_HEIGHT, "h-icon height for {shape:?}/{background:?}");
+                assert_eq!(hi.height(), expected_h, "h-icon height for {shape:?}/{background:?}");
                 // Vertical: appearance must not change the badge width.
                 let v = render_vertical_badge(&badge, &font, LabelStyle::Text, appearance, 1.0);
                 assert_eq!(v.width(), BASE_VERT_BADGE_WIDTH, "v width for {shape:?}/{background:?}");

api/src/image/generate.rs

@@ -278,6 +278,9 @@ pub fn render_poster_sync(
     badge_size: BadgeSize,
     poster_badge_split: bool,
 ) -> Result<Vec<u8>, AppError> {
+    // A pill is a horizontal lozenge (icon/label left, value right) — never a
+    // vertical stacked badge, even when the configured style is vertical.
+    let badge_style = if badge_appearance.is_pill() { BadgeStyle::Horizontal } else { badge_style };
     let base = load_image_with_limits(poster_bytes)?;
 
     let base = if base.width() != target_width {
@@ -364,6 +367,9 @@ pub fn render_logo_sync(
     target_width: u32,
     badge_scale: f32,
 ) -> Result<Vec<u8>, AppError> {
+    // A pill is a horizontal lozenge (icon/label left, value right) — never a
+    // vertical stacked badge, even when the configured style is vertical.
+    let badge_style = if badge_appearance.is_pill() { BadgeStyle::Horizontal } else { badge_style };
     let base = load_image_with_limits(logo_bytes)?;
 
     let base = if base.width() != target_width {
@@ -547,6 +553,9 @@ pub fn render_backdrop_sync(
     badge_scale: f32,
     _badge_size: BadgeSize,
 ) -> Result<Vec<u8>, AppError> {
+    // A pill is a horizontal lozenge (icon/label left, value right) — never a
+    // vertical stacked badge, even when the configured style is vertical.
+    let badge_style = if badge_appearance.is_pill() { BadgeStyle::Horizontal } else { badge_style };
     let base = load_image_with_limits(backdrop_bytes)?;
 
     let base = if base.width() != target_width {
@@ -631,6 +640,9 @@ pub fn render_episode_sync(
     badge_size: BadgeSize,
     blur: bool,
 ) -> Result<Vec<u8>, AppError> {
+    // A pill is a horizontal lozenge (icon/label left, value right) — never a
+    // vertical stacked badge, even when the configured style is vertical.
+    let badge_style = if badge_appearance.is_pill() { BadgeStyle::Horizontal } else { badge_style };
     let base = image::load_from_memory(image_bytes)
         .map_err(AppError::Image)?;
 
@@ -801,6 +813,32 @@ mod tests {
         assert_eq!(&result[..4], &[0x89, b'P', b'N', b'G']);
     }
 
+    #[test]
+    fn pill_renders_horizontally_regardless_of_style() {
+        use crate::services::db::{BadgeBackground, BadgeShape};
+        use crate::services::ratings::{RatingBadge, RatingSource};
+
+        let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
+        let png = test_png(400, 100);
+        let badges = vec![
+            RatingBadge { source: RatingSource::Imdb, value: "8.5".to_string() },
+            RatingBadge { source: RatingSource::Tmdb, value: "85%".to_string() },
+        ];
+        let pill = BadgeAppearance { shape: BadgeShape::Pill, background: BadgeBackground::Default };
+        let rounded = BadgeAppearance::default();
+
+        // A pill ignores the vertical style and always renders horizontally, so
+        // vertical+pill and horizontal+pill produce identical output.
+        let v_pill = render_logo_sync(&png, &badges, &font, BadgeStyle::Vertical, LabelStyle::Official, pill, 500, 1.0).unwrap();
+        let h_pill = render_logo_sync(&png, &badges, &font, BadgeStyle::Horizontal, LabelStyle::Official, pill, 500, 1.0).unwrap();
+        assert_eq!(v_pill, h_pill, "pill should render horizontally even when the style is vertical");
+
+        // Rounded badges still honour the style, so the two layouts differ.
+        let v_round = render_logo_sync(&png, &badges, &font, BadgeStyle::Vertical, LabelStyle::Official, rounded, 500, 1.0).unwrap();
+        let h_round = render_logo_sync(&png, &badges, &font, BadgeStyle::Horizontal, LabelStyle::Official, rounded, 500, 1.0).unwrap();
+        assert_ne!(v_round, h_round, "rounded badges should still differ between vertical and horizontal styles");
+    }
+
     #[test]
     fn render_logo_downscales_wide_image() {
         let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();

api/src/services/db.rs

@@ -290,6 +290,15 @@ impl Default for BadgeAppearance {
     }
 }
 
+impl BadgeAppearance {
+    /// A pill is a horizontal lozenge (icon/label left, value right). Vertical
+    /// stacked pills look wrong, so callers render pills horizontally regardless
+    /// of the configured badge style.
+    pub fn is_pill(self) -> bool {
+        matches!(self.shape, BadgeShape::Pill)
+    }
+}
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum ImageSource {
     Tmdb,