Attempt 2 at scaling

Added some more logic for scaling to hopefully have a uniform state

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

constants/TVSizes.ts

@@ -1,10 +1,12 @@
 import { TVTypographyScale, useSettings } from "@/utils/atoms/settings";
+import { scaleSize } from "@/utils/scaleSize";
 
 /**
  * TV Layout Sizes
  *
  * Unified constants for TV interface layout including posters, gaps, and padding.
- * All values scale based on the user's tvTypographyScale setting.
+ * Base values are designed for 1920x1080 and scaled to the actual viewport via
+ * scaleSize(), then further adjusted by the user's tvTypographyScale setting.
  */
 
 // =============================================================================
@@ -48,7 +50,7 @@ export const TVGaps = {
  */
 export const TVPadding = {
   /** Horizontal padding from screen edges */
-  horizontal: 60,
+  horizontal: 90,
 
   /** Padding to accommodate scale animations (1.05x) */
   scale: 20,
@@ -129,20 +131,20 @@ export const useScaledTVSizes = (): ScaledTVSizes => {
 
   return {
     posters: {
-      poster: Math.round(TVPosterSizes.poster * scale),
-      landscape: Math.round(TVPosterSizes.landscape * scale),
-      episode: Math.round(TVPosterSizes.episode * scale),
+      poster: Math.round(scaleSize(TVPosterSizes.poster) * scale),
+      landscape: Math.round(scaleSize(TVPosterSizes.landscape) * scale),
+      episode: Math.round(scaleSize(TVPosterSizes.episode) * scale),
     },
     gaps: {
-      item: Math.round(TVGaps.item * scale),
-      section: Math.round(TVGaps.section * scale),
-      small: Math.round(TVGaps.small * scale),
-      large: Math.round(TVGaps.large * scale),
+      item: Math.round(scaleSize(TVGaps.item) * scale),
+      section: Math.round(scaleSize(TVGaps.section) * scale),
+      small: Math.round(scaleSize(TVGaps.small) * scale),
+      large: Math.round(scaleSize(TVGaps.large) * scale),
     },
     padding: {
-      horizontal: Math.round(TVPadding.horizontal * scale),
-      scale: Math.round(TVPadding.scale * scale),
-      vertical: Math.round(TVPadding.vertical * scale),
+      horizontal: Math.round(scaleSize(TVPadding.horizontal) * scale),
+      scale: Math.round(scaleSize(TVPadding.scale) * scale),
+      vertical: Math.round(scaleSize(TVPadding.vertical) * scale),
       heroHeight: TVPadding.heroHeight * scale,
     },
     animation: TVAnimation,

constants/TVTypography.ts

@@ -4,25 +4,28 @@ import { TVTypographyScale, useSettings } from "@/utils/atoms/settings";
  * TV Typography Scale
  *
  * Consistent text sizes for TV interface components.
- * These sizes are optimized for TV viewing distance.
+ * Design values are for 1920×1080 and scaled proportionally
+ * to the actual viewport via scaleSize().
  */
 
+import { scaleSize } from "@/utils/scaleSize";
+
 export const TVTypography = {
-  /** Hero titles, movie/show names - 70px */
-  display: 70,
+  /** Hero titles, movie/show names */
+  display: scaleSize(70),
 
-  /** Episode series name, major headings - 42px */
-  title: 42,
+  /** Episode series name, major headings */
+  title: scaleSize(42),
 
-  /** Section headers (Cast, Technical Details, From this Series) - 32px */
-  heading: 32,
+  /** Section headers (Cast, Technical Details, From this Series) */
+  heading: scaleSize(32),
 
-  /** Overview, actor names, card titles, metadata - 20px */
-  body: 20,
+  /** Overview, actor names, card titles, metadata */
+  body: scaleSize(40),
 
-  /** Secondary text, labels, subtitles - 16px */
-  callout: 16,
-} as const;
+  /** Secondary text, labels, subtitles */
+  callout: scaleSize(26),
+};
 
 export type TVTypographyKey = keyof typeof TVTypography;