From c4789070d054b3c78132440e20591db096ee0e77 Mon Sep 17 00:00:00 2001
From: edde746 <86283021+edde746@users.noreply.github.com>
Date: Sun, 11 Jan 2026 14:27:57 +0100
Subject: [PATCH] fix: apply mixed hub aspect ratio to hub detail grid

---
 lib/screens/hub_detail_screen.dart | 37 ++++++++++++++++++++++++++----
 lib/widgets/media_grid_sliver.dart | 11 +++++++++
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/lib/screens/hub_detail_screen.dart b/lib/screens/hub_detail_screen.dart
index f8e0f9ba..f43969a2 100644
--- a/lib/screens/hub_detail_screen.dart
+++ b/lib/screens/hub_detail_screen.dart
@@ -1,10 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:plezy/widgets/app_icon.dart';
 import 'package:material_symbols_icons/symbols.dart';
+import 'package:provider/provider.dart';
 import '../../services/plex_client.dart';
 import '../models/plex_hub.dart';
 import '../models/plex_metadata.dart';
 import '../models/plex_sort.dart';
+import '../providers/settings_provider.dart';
+import '../services/settings_service.dart';
 import '../utils/provider_extensions.dart';
 import '../utils/app_logger.dart';
 import '../widgets/media_grid_sliver.dart';
@@ -245,11 +248,35 @@ class _HubDetailScreenState extends State<HubDetailScreen> with Refreshable {
         else if (_filteredItems.isEmpty)
           SliverFillRemaining(child: Center(child: Text(t.hubDetail.noItemsFound)))
         else
-          MediaGridSliver(
-            items: _filteredItems,
-            onRefresh: _handleItemRefresh,
-            usePaddingAwareExtent: true,
-            horizontalPadding: 16,
+          Builder(
+            builder: (context) {
+              final episodePosterMode = context.watch<SettingsProvider>().episodePosterMode;
+
+              // Determine hub content type for layout decisions
+              final hasEpisodes = _filteredItems.any((item) =>
+                  item.usesWideAspectRatio(episodePosterMode));
+              final hasNonEpisodes = _filteredItems.any((item) =>
+                  !item.usesWideAspectRatio(episodePosterMode));
+
+              // Mixed hub = has both episodes AND non-episodes
+              final isMixedHub = hasEpisodes && hasNonEpisodes;
+
+              // Episode-only = all items are episodes with thumbnails
+              final isEpisodeOnlyHub = hasEpisodes && !hasNonEpisodes;
+
+              // Use 16:9 for episode-only hubs OR mixed hubs (with episode thumbnail mode)
+              final useWideLayout = episodePosterMode == EpisodePosterMode.episodeThumbnail &&
+                  (isEpisodeOnlyHub || isMixedHub);
+
+              return MediaGridSliver(
+                items: _filteredItems,
+                onRefresh: _handleItemRefresh,
+                usePaddingAwareExtent: true,
+                horizontalPadding: 16,
+                useWideAspectRatio: useWideLayout,
+                mixedHubContext: isMixedHub,
+              );
+            },
           ),
       ],
     );
diff --git a/lib/widgets/media_grid_sliver.dart b/lib/widgets/media_grid_sliver.dart
index 9464af49..2133ecc1 100644
--- a/lib/widgets/media_grid_sliver.dart
+++ b/lib/widgets/media_grid_sliver.dart
@@ -33,6 +33,13 @@ class MediaGridSliver extends StatelessWidget {
   /// Only used if usePaddingAwareExtent is true
   final double horizontalPadding;
 
+  /// Whether to use 16:9 aspect ratio for episode thumbnails
+  final bool useWideAspectRatio;
+
+  /// Whether this grid is displaying items from a mixed hub context
+  /// (containing both episodes and non-episodes)
+  final bool mixedHubContext;
+
   const MediaGridSliver({
     super.key,
     required this.items,
@@ -42,6 +49,8 @@ class MediaGridSliver extends StatelessWidget {
     this.padding = const EdgeInsets.fromLTRB(8, 0, 8, 8),
     this.usePaddingAwareExtent = false,
     this.horizontalPadding = 16,
+    this.useWideAspectRatio = false,
+    this.mixedHubContext = false,
   });
 
   @override
@@ -56,6 +65,7 @@ class MediaGridSliver extends StatelessWidget {
               density: settingsProvider.libraryDensity,
               usePaddingAware: usePaddingAwareExtent,
               horizontalPadding: horizontalPadding,
+              useWideAspectRatio: useWideAspectRatio,
             ),
             delegate: SliverChildBuilderDelegate((context, index) {
               final item = items[index];
@@ -65,6 +75,7 @@ class MediaGridSliver extends StatelessWidget {
                 onRefresh: onRefresh,
                 collectionId: collectionId,
                 onListRefresh: onListRefresh,
+                mixedHubContext: mixedHubContext,
               );
             }, childCount: items.length),
           );