From 3b460134feef48014296fd4efaa440107c0d1306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?=
 <127139797+balazs-szucs@users.noreply.github.com>
Date: Sat, 31 Jan 2026 22:47:39 +0100
Subject: [PATCH] Refactor series page footer: rename .footer-inner to
 .footer-content and update responsive styles (#2555)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
---
 .../series-page/series-page.component.html    |  2 +-
 .../series-page/series-page.component.scss    | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/booklore-ui/src/app/features/book/components/series-page/series-page.component.html b/booklore-ui/src/app/features/book/components/series-page/series-page.component.html
index 8685aa783..3072bf083 100644
--- a/booklore-ui/src/app/features/book/components/series-page/series-page.component.html
+++ b/booklore-ui/src/app/features/book/components/series-page/series-page.component.html
@@ -124,7 +124,7 @@
 @if (selectedBooks.size > 0) {
   @if (userService.userState$ | async; as userState) {
     <div class="book-browser-footer" [@slideInOut]>
-      <div class="footer-inner">
+      <div class="footer-content">
         <div class="footer-left">
           <div class="selected-count-badge">
             <i class="pi pi-check-circle badge-icon"></i>
diff --git a/booklore-ui/src/app/features/book/components/series-page/series-page.component.scss b/booklore-ui/src/app/features/book/components/series-page/series-page.component.scss
index 1b9905e23..1c08af1a1 100644
--- a/booklore-ui/src/app/features/book/components/series-page/series-page.component.scss
+++ b/booklore-ui/src/app/features/book/components/series-page/series-page.component.scss
@@ -223,13 +223,20 @@
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-width: 1px 1px 0px 1px;
   background-color: var(--card-background);
-  background-color: color-mix(in srgb, var(--card-background), transparent 90%);
+
+  > .footer-content {
+    width: 100%;
+  }
+
+  @media (max-width: 768px) {
+    left: 0;
+    right: 0;
+  }
 }
 
-.footer-inner {
+.footer-content {
   display: flex;
   align-items: center;
-  width: 100%;
 }
 
 .footer-left {
@@ -289,11 +296,6 @@
 }
 
 @media (max-width: 768px) {
-  .book-browser-footer {
-    left: 0%;
-    right: 0%;
-  }
-
   .selected-count-badge {
     padding: 0.4rem 0.8rem;
     font-size: 0.85rem;
@@ -303,3 +305,4 @@
     }
   }
 }
+