refactor(widgets): improve layout and appearance of suggestion widgets

- Remove card margin and add padding for content collection decorator
- Reduce spacing between elements and adjust list view height
- Update suggestion item widget to use source logo URL and improve image display
- Adjust text styling and button size in suggestion item widget

Author: fulleni

lib/shared/widgets/feed_decorators/content_collection_decorator_widget.dart

@@ -54,17 +54,14 @@ class ContentCollectionDecoratorWidget extends StatelessWidget {
       }
     }
 
-    return Card(
-      margin: const EdgeInsets.symmetric(
-        horizontal: AppSpacing.lg,
-        vertical: AppSpacing.md,
-      ),
-      child: Padding(
-        padding: const EdgeInsets.all(AppSpacing.lg),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Row(
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: AppSpacing.md),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: AppSpacing.lg),
+            child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Expanded(
@@ -77,29 +74,30 @@ class ContentCollectionDecoratorWidget extends StatelessWidget {
                 ),
               ],
             ),
-            const SizedBox(height: AppSpacing.md),
-            SizedBox(
-              height: 200,
-              child: ListView.builder(
-                scrollDirection: Axis.horizontal,
-                itemCount: item.items.length,
-                itemBuilder: (context, index) {
-                  final suggestion = item.items[index];
-                  final isFollowing =
-                      (suggestion is Topic &&
-                          followedTopicIds.contains(suggestion.id)) ||
-                      (suggestion is Source &&
-                          followedSourceIds.contains(suggestion.id));
-                  return SuggestionItemWidget(
-                    item: suggestion,
-                    onFollowToggle: onFollowToggle,
-                    isFollowing: isFollowing,
-                  );
-                },
-              ),
+          ),
+          const SizedBox(height: AppSpacing.sm),
+          SizedBox(
+            height: 180,
+            child: ListView.builder(
+              scrollDirection: Axis.horizontal,
+              itemCount: item.items.length,
+              padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
+              itemBuilder: (context, index) {
+                final suggestion = item.items[index];
+                final isFollowing =
+                    (suggestion is Topic &&
+                        followedTopicIds.contains(suggestion.id)) ||
+                    (suggestion is Source &&
+                        followedSourceIds.contains(suggestion.id));
+                return SuggestionItemWidget(
+                  item: suggestion,
+                  onFollowToggle: onFollowToggle,
+                  isFollowing: isFollowing,
+                );
+              },
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }

lib/shared/widgets/feed_decorators/suggestion_item_widget.dart

@@ -41,68 +41,66 @@ class SuggestionItemWidget extends StatelessWidget {
       name = topic.name;
     } else if (item is Source) {
       final source = item as Source;
-      // TODO(fulleni): Add imageUrl to the Source model for a richer UI.
-      imageUrl = '';
+      imageUrl = source.logoUrl;
       name = source.name;
     } else {
       // Fallback for unexpected types, though type checking should prevent this
       imageUrl = '';
       name = 'Unknown';
     }
 
-    return Card(
-      color: theme.colorScheme.surfaceVariant,
-      margin: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
-      child: SizedBox(
-        width: 160,
-        child: Padding(
-          padding: const EdgeInsets.all(AppSpacing.md),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              // Square image/icon
-              Container(
-                width: 64,
-                height: 64,
-                decoration: BoxDecoration(
-                  color: theme.colorScheme.surface,
-                  borderRadius: BorderRadius.circular(AppSpacing.sm),
+    return SizedBox(
+      width: 150,
+      child: Card(
+        clipBehavior: Clip.antiAlias,
+        margin: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
+        child: Column(
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(AppSpacing.md),
+                child: Image.network(
+                  imageUrl,
+                  fit: BoxFit.contain,
+                  errorBuilder: (context, error, stackTrace) => Icon(
+                    item is Source
+                        ? Icons.source_outlined
+                        : Icons.category_outlined,
+                    size: AppSpacing.xxl,
+                    color: theme.colorScheme.onSurfaceVariant,
+                  ),
                 ),
-                child: imageUrl.isNotEmpty
-                    ? ClipRRect(
-                        borderRadius: BorderRadius.circular(AppSpacing.sm),
-                        child: Image.network(
-                          imageUrl,
-                          fit: BoxFit.cover,
-                          errorBuilder: (context, error, stackTrace) => Icon(
-                            Icons.broken_image,
-                            color: theme.colorScheme.onSurface,
-                          ),
-                        ),
-                      )
-                    : Icon(
-                        // Use a more specific icon for sources as a fallback.
-                        item is Source ? Icons.source : Icons.category,
-                        color: theme.colorScheme.onSurface,
-                      ),
               ),
-              const SizedBox(height: AppSpacing.md),
-              Text(
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
+              child: Text(
                 name,
-                style: theme.textTheme.titleSmall,
+                style: theme.textTheme.bodyMedium,
                 textAlign: TextAlign.center,
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
               ),
-              const SizedBox(height: AppSpacing.md),
-              ElevatedButton(
+            ),
+            Padding(
+              padding: const EdgeInsets.all(
+                AppSpacing.sm,
+              ).copyWith(top: AppSpacing.xs),
+              child: ElevatedButton(
+                style: ElevatedButton.styleFrom(
+                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                ),
                 onPressed: () => onFollowToggle(item),
-                child: Text(
-                  isFollowing ? l10n.unfollowButtonText : l10n.followButtonText,
+                child: FittedBox(
+                  child: Text(
+                    isFollowing
+                        ? l10n.unfollowButtonText
+                        : l10n.followButtonText,
+                  ),
                 ),
               ),
-            ],
-          ),
+            ),
+          ],
         ),
       ),
     );