From b8b00dfe381f5d0f6904dc694b71b99081b56b15 Mon Sep 17 00:00:00 2001
From: MrSimmo <MrSimmo@users.noreply.github.com>
Date: Thu, 7 May 2026 15:42:16 +0100
Subject: [PATCH] fix: scope focus scale to inner wrapper to avoid layout
 reflow

Replace 'transition: all' on .itemCard with 'transition: transform' on a new .itemCardInner element. Eliminates CPU reflow during focus animations on lower-power Smart TV hardware. Applied symmetrically to Favorites and Library views.
---
 packages/app/src/views/Favorites/Favorites.js       |  2 ++
 .../app/src/views/Favorites/Favorites.module.less   | 13 +++++++++++--
 packages/app/src/views/Library/Library.js           |  2 ++
 packages/app/src/views/Library/Library.module.less  | 13 +++++++++++--
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/views/Favorites/Favorites.js b/packages/app/src/views/Favorites/Favorites.js
index f64474d2..2e59d6a9 100644
--- a/packages/app/src/views/Favorites/Favorites.js
+++ b/packages/app/src/views/Favorites/Favorites.js
@@ -345,6 +345,7 @@ className={css.itemCard}
 onClick={handleItemClick}
 data-index={index}
 >
+<div className={css.itemCardInner}>
 {imageUrl ? (
 <img
 className={`${css.poster} ${isPerson ? css.personPoster : ''}`}
@@ -371,6 +372,7 @@ loading="lazy"
 <svg viewBox="0 0 24 24"><path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
 </div>
 )}
+</div>
 </SpottableDiv>
 );
 }, [serverUrl, handleItemClick, items.length, totalCount, isLoading, loadItems, imageType, posterHeight, unifiedMode]);
diff --git a/packages/app/src/views/Favorites/Favorites.module.less b/packages/app/src/views/Favorites/Favorites.module.less
index 2f694779..3cc442ee 100644
--- a/packages/app/src/views/Favorites/Favorites.module.less
+++ b/packages/app/src/views/Favorites/Favorites.module.less
@@ -156,7 +156,6 @@ height: 0;
 .itemCard {
 position: relative;
 cursor: pointer;
-transition: all 0.2s ease;
 border-radius: 8px;
 overflow: visible;
 background: transparent;
@@ -164,15 +163,25 @@ margin: 10px;
 
 &:focus {
 outline: none;
-transform: scale(1.05);
 z-index: 10;
 
+.itemCardInner {
+transform: scale(1.05);
+}
+
 .poster {
 border-color: white;
 }
 }
 }
 
+.itemCardInner {
+position: relative;
+width: 100%;
+height: 100%;
+transition: transform 0.2s ease;
+}
+
 .poster {
 width: 100%;
 height: 270px;
diff --git a/packages/app/src/views/Library/Library.js b/packages/app/src/views/Library/Library.js
index 9005130e..254426d0 100644
--- a/packages/app/src/views/Library/Library.js
+++ b/packages/app/src/views/Library/Library.js
@@ -740,6 +740,7 @@ onFocus={() => {
 }}
 data-index={index}
 >
+<div className={css.itemCardInner}>
 {imageUrl ? (
 <img
 className={css.poster}
@@ -777,6 +778,7 @@ loading="lazy"
 <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></svg>
 </div>
 )}
+</div>
 </SpottableDiv>
 );
 }, [effectiveServerUrl, handleItemClick, items.length, totalCount, isLoading, loadItems, effectiveImageType, posterHeight, isSquareImage, isFolderView, settings]);
diff --git a/packages/app/src/views/Library/Library.module.less b/packages/app/src/views/Library/Library.module.less
index 3bd28b1d..931d15a0 100644
--- a/packages/app/src/views/Library/Library.module.less
+++ b/packages/app/src/views/Library/Library.module.less
@@ -320,7 +320,6 @@
 .itemCard {
 	position: relative;
 	cursor: pointer;
-	transition: transform 0.2s ease;
 	border-radius: 8px;
 	overflow: visible;
 	background: transparent;
@@ -328,15 +327,25 @@
 
 	&:focus {
 		outline: none;
-		transform: scale(1.05);
 		z-index: 10;
 
+		.itemCardInner {
+			transform: scale(1.05);
+		}
+
 		.poster {
 			border-color: white;
 		}
 	}
 }
 
+.itemCardInner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	transition: transform 0.2s ease;
+}
+
 .poster {
 	width: 100%;
 	height: 270px;