From 084f120008038364357c833eb9e853e1687dd47a Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Fri, 4 Sep 2026 09:45:55 +0200
Subject: [PATCH 1/3] feat(home): center cards and contain posters so actions
 stay visible

---
 src/app/components/home/home.component.ts | 55 ++++++++++++++---------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 2606419..96411a4 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -15,36 +15,43 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
     <div>
       <h1 class="text-2xl mb-8 text-light-font dark:text-dark-font">What should I watch now?</h1>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-        <div>
-          <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 justify-items-center">
+        <div class="w-full max-w-[360px] justify-self-center">
+          <h2
+            class="text-center text-sm font-semibold tracking-wide uppercase mb-3 text-light-font-secondary dark:text-dark-font-secondary"
+          >
             Next Series
           </h2>
           @if (nextSeries()) {
-            <div class="mb-4">
-              <app-item-card [item]="nextSeries()!" />
-              <div class="flex gap-2 mt-3">
+            <div class="w-full">
+              <!-- Contained poster: ItemCard img is w-full aspect-[2/3], clamp to 320px so actions stay above fold -->
+              <div
+                class="[&>app-item-card>div]:overflow-hidden [&_img]:!h-[320px] [&_img]:!aspect-auto [&_img]:object-cover"
+              >
+                <app-item-card [item]="nextSeries()!" />
+              </div>
+              <div class="flex flex-wrap justify-center gap-2 mt-3">
                 <button
                   (click)="markItem(nextSeries, 'watched')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-transparent rounded bg-accent-primary text-white cursor-pointer text-xs font-medium hover:bg-accent-primary-hover"
                 >
                   Mark Watched
                 </button>
                 <button
                   (click)="markItem(nextSeries, 'completed')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                 >
                   Mark Completed
                 </button>
                 <button
                   (click)="markItem(nextSeries, 'paused')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                 >
                   Pause
                 </button>
                 <button
                   (click)="markItem(nextSeries, 'dropped')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                 >
                   Drop
                 </button>
@@ -52,7 +59,7 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
             </div>
           } @else {
             <p
-              class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
+              class="w-full p-6 text-center text-sm rounded-lg border border-dashed border-light-border dark:border-dark-border text-light-font-muted dark:text-dark-font-muted"
             >
               @if (hasSeries()) {
                 @if (hasInProgressSeries()) {
@@ -67,35 +74,41 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
           }
         </div>
 
-        <div>
-          <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+        <div class="w-full max-w-[360px] justify-self-center">
+          <h2
+            class="text-center text-sm font-semibold tracking-wide uppercase mb-3 text-light-font-secondary dark:text-dark-font-secondary"
+          >
             Next Movie
           </h2>
           @if (nextMovie()) {
-            <div class="mb-4">
-              <app-item-card [item]="nextMovie()!" />
-              <div class="flex gap-2 mt-3">
+            <div class="w-full">
+              <div
+                class="[&>app-item-card>div]:overflow-hidden [&_img]:!h-[320px] [&_img]:!aspect-auto [&_img]:object-cover"
+              >
+                <app-item-card [item]="nextMovie()!" />
+              </div>
+              <div class="flex flex-wrap justify-center gap-2 mt-3">
                 <button
                   (click)="markItem(nextMovie, 'watched')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-transparent rounded bg-accent-primary text-white cursor-pointer text-xs font-medium hover:bg-accent-primary-hover"
                 >
                   Mark Watched
                 </button>
                 <button
                   (click)="markItem(nextMovie, 'completed')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                 >
                   Mark Completed
                 </button>
                 <button
                   (click)="markItem(nextMovie, 'paused')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                 >
                   Pause
                 </button>
                 <button
                   (click)="markItem(nextMovie, 'dropped')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                 >
                   Drop
                 </button>
@@ -103,7 +116,7 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
             </div>
           } @else {
             <p
-              class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
+              class="w-full p-6 text-center text-sm rounded-lg border border-dashed border-light-border dark:border-dark-border text-light-font-muted dark:text-dark-font-muted"
             >
               @if (hasMovies()) {
                 No movies currently being watched

From 14d379f813ebb120a98bb0640e36867e06f2d2e6 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Fri, 4 Sep 2026 10:00:43 +0200
Subject: [PATCH 2/3] fix(home): show full poster artwork without cropping

---
 src/app/components/home/home.component.ts | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 96411a4..61473da 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -16,7 +16,7 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
       <h1 class="text-2xl mb-8 text-light-font dark:text-dark-font">What should I watch now?</h1>
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8 justify-items-center">
-        <div class="w-full max-w-[360px] justify-self-center">
+        <div class="w-full max-w-[280px] justify-self-center">
           <h2
             class="text-center text-sm font-semibold tracking-wide uppercase mb-3 text-light-font-secondary dark:text-dark-font-secondary"
           >
@@ -24,12 +24,8 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
           </h2>
           @if (nextSeries()) {
             <div class="w-full">
-              <!-- Contained poster: ItemCard img is w-full aspect-[2/3], clamp to 320px so actions stay above fold -->
-              <div
-                class="[&>app-item-card>div]:overflow-hidden [&_img]:!h-[320px] [&_img]:!aspect-auto [&_img]:object-cover"
-              >
-                <app-item-card [item]="nextSeries()!" />
-              </div>
+              <!-- Narrow card (280px) keeps natural 2/3 poster (~420px tall) fully visible, no cropping -->
+              <app-item-card [item]="nextSeries()!" />
               <div class="flex flex-wrap justify-center gap-2 mt-3">
                 <button
                   (click)="markItem(nextSeries, 'watched')"
@@ -74,7 +70,7 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
           }
         </div>
 
-        <div class="w-full max-w-[360px] justify-self-center">
+        <div class="w-full max-w-[280px] justify-self-center">
           <h2
             class="text-center text-sm font-semibold tracking-wide uppercase mb-3 text-light-font-secondary dark:text-dark-font-secondary"
           >
@@ -82,11 +78,7 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
           </h2>
           @if (nextMovie()) {
             <div class="w-full">
-              <div
-                class="[&>app-item-card>div]:overflow-hidden [&_img]:!h-[320px] [&_img]:!aspect-auto [&_img]:object-cover"
-              >
-                <app-item-card [item]="nextMovie()!" />
-              </div>
+              <app-item-card [item]="nextMovie()!" />
               <div class="flex flex-wrap justify-center gap-2 mt-3">
                 <button
                   (click)="markItem(nextMovie, 'watched')"

From d7a4caa3b492d340cdf29626ac073a3671cb3a18 Mon Sep 17 00:00:00 2001
From: CodeWithMaBot <310216433+CodeWithMaBot@users.noreply.github.com>
Date: Fri, 4 Sep 2026 10:21:23 +0200
Subject: [PATCH 3/3] fix(home): drop Mark Completed so actions fit on one row

---
 src/app/components/home/home.component.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 61473da..dbcd8b6 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -33,12 +33,6 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
                 >
                   Mark Watched
                 </button>
-                <button
-                  (click)="markItem(nextSeries, 'completed')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
-                >
-                  Mark Completed
-                </button>
                 <button
                   (click)="markItem(nextSeries, 'paused')"
                   class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
@@ -86,12 +80,6 @@ import { ProviderSettingsService } from '../../services/provider-settings.servic
                 >
                   Mark Watched
                 </button>
-                <button
-                  (click)="markItem(nextMovie, 'completed')"
-                  class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
-                >
-                  Mark Completed
-                </button>
                 <button
                   (click)="markItem(nextMovie, 'paused')"
                   class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-xs hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"