From c9f1e32c14774331010ea97d0f08d26279823365 Mon Sep 17 00:00:00 2001
From: Amelia <77553571+Fesaa@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:25:40 +0200
Subject: [PATCH] Fix alignment on collection details page

Fix overlap with manga reader in go-to-page dialog
---
 .../_components/book-reader/book-reader.component.ts      | 5 +++--
 .../collection-detail/collection-detail.component.html    | 2 +-
 UI/Web/src/assets/langs/en.json                           | 8 ++++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
index 4d2f5eae3..002d769e8 100644
--- a/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
+++ b/UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
@@ -909,8 +909,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
   async promptForPage() {
     const promptConfig = {...this.confirmService.defaultPrompt};
-    promptConfig.header = translate('book-reader.go-to-page');
-    promptConfig.content = translate('book-reader.go-to-page-prompt', {totalPages: this.maxPages - 1});
+    // Pages are called sections in the UI, manga reader uses the go-to-page string so we use a different one here
+    promptConfig.header = translate('book-reader.go-to-section');
+    promptConfig.content = translate('book-reader.go-to-section-prompt', {totalSections: this.maxPages - 1});
 
     const goToPageNum = await this.confirmService.prompt(undefined, promptConfig);
 
diff --git a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
index 927316f99..1fad4b6e8 100644
--- a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
+++ b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
@@ -11,7 +11,7 @@
                 <app-card-actionables [entity]="collectionTag" [disabled]="actionInProgress" [inputActions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
               </h4>
             }
-            <h5 subtitle class="subtitle-with-actionables">{{t('item-count', {num: series.length})}}</h5>
+            <h5 subtitle class="ms-2 subtitle-with-actionables">{{t('item-count', {num: series.length})}}</h5>
           </ng-container>
         </app-side-nav-companion-bar>
       }
diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json
index df2036e0e..3c53c4b56 100644
--- a/UI/Web/src/assets/langs/en.json
+++ b/UI/Web/src/assets/langs/en.json
@@ -861,7 +861,6 @@
         "page-label": "Page",
 
         "pagination-header": "Section",
-        "go-to-page": "Go to page",
         "go-to-first-page": "Go to first page",
         "go-to-last-page": "Go to last page",
         "prev-page": "Prev Page",
@@ -883,7 +882,12 @@
         "incognito-mode-label": "Incognito Mode",
         "next": "Next",
         "previous": "Previous",
-        "go-to-page-prompt": "There are {{totalPages}} sections. What section do you want to go to?"
+
+        "go-to-page": "Go to page",
+        "go-to-page-prompt": "There are {{totalPages}} pages. What page do you want to go to?",
+
+        "go-to-section": "Go to section",
+        "go-to-section-prompt": "There are {{totalSections}} sections. What section do you want to go to?"
     },
 
     "personal-table-of-contents": {