From d8be663a4df9986a8778606325d43e0f3dea7989 Mon Sep 17 00:00:00 2001
From: Ruben GM <2044827+rubengarciam@users.noreply.github.com>
Date: Wed, 10 Sep 2025 13:44:04 +1000
Subject: [PATCH] feat: Row alignment, badge to right (#1122)

* row alignment, badge to right

* unnecessary css
---
 .../book-browser/book-filter/book-filter.component.html   | 5 +++--
 .../book-browser/book-filter/book-filter.component.scss   | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.html b/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.html
index f4f111df0..0c71348cd 100644
--- a/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.html
+++ b/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.html
@@ -34,13 +34,14 @@
                 style="overscroll-behavior: contain;">
                 @for (filter of filters; track trackByFilter(j, filter); let j = $index) {
                   <div
-                    class="cursor-pointer transition-colors duration-200 ease-in-out pb-1 flex items-center gap-2"
+                    class="filter-row cursor-pointer transition-colors duration-200 ease-in-out pb-1 flex flex-row items-center justify-between gap-2"
                     [ngClass]="{
                       'text-[var(--primary-color)]': activeFilters[filterType]?.includes(filter.value?.id || filter.value)
                     }"
                     (click)="handleFilterClick(filterType, filter.value?.id || filter.value)">
-                    <p-badge [value]="filter.bookCount"></p-badge>
                     {{ filter.value.name || filter.value }}
+                    <p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
+                    <!-- <p class="text-[var(--primary-color)]"> {{ filter.bookCount }}</p> -->
                   </div>
                 }
               </div>
diff --git a/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.scss b/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.scss
index 551d25634..813bcdb3d 100644
--- a/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.scss
+++ b/booklore-ui/src/app/book/components/book-browser/book-filter/book-filter.component.scss
@@ -1,3 +1,11 @@
 :host ::ng-deep p-accordion-header {
   --p-accordion-header-padding: 0.6rem 1rem;
 }
+
+.filter-row{
+  align-items: flex-start;
+}
+
+p-badge.filter-value-badge {
+  border-radius: 6px !important; /* Makes the badge square */
+}
\ No newline at end of file