diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
index 707f24cc0..498037175 100644
--- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
+++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
@@ -4,202 +4,221 @@
   @if (series && seriesMetadata && libraryType !== null) {
     <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
       <div class="row mb-0 mb-xl-3 info-container">
-          
+
         <div class="info-grid-container">
           <div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-background' : ''"
                class="image-container series position-relative">
-            <app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
+            <app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)"
+                             [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
           </div>
-            
+
           <div class="metadata-details-upper">
             <div class="metadata-details-wrapper">
-                <h4 class="title mb-2">
-                <span>{{series.name}}
-    
-                  @if(isLoadingExtra || isLoading) {
+              <h4 class="title mb-2">
+                <span>{{ series.name }}
+
+                  @if (isLoadingExtra || isLoading) {
                     <div class="spinner-border spinner-border-sm text-primary" role="status">
                       <span class="visually-hidden">loading...</span>
                     </div>
-                    }
-                </span>
-                </h4>
-                <div class="subtitle mt-2 mb-2">
-                  @if (series.localizedName !== series.name && series.localizedName) {
-                    <span>{{series.localizedName | defaultValue}}</span>
                   }
-                </div>
-    
-                <app-metadata-detail-row [entity]="seriesMetadata"
-                                         [readingTimeLeft]="readingTimeLeft"
-                                         [ageRating]="seriesMetadata.ageRating"
-                                         [hasReadingProgress]="hasReadingProgress"
-                                         [readingTimeEntity]="series"
-                                         [libraryType]="libraryType"
-                                         [mangaFormat]="series.format">
-                </app-metadata-detail-row>
-    
-                <div class="mt-2 mb-2">
-                  <app-external-rating [seriesId]="series.id"
-                                       [ratings]="ratings"
-                                       [userRating]="series.userRating"
-                                       [hasUserRated]="series.hasUserRated"
+                </span>
+              </h4>
+              <div class="subtitle mt-2 mb-2">
+                @if (series.localizedName !== series.name && series.localizedName) {
+                  <span>{{ series.localizedName | defaultValue }}</span>
+                }
+              </div>
+
+              <app-metadata-detail-row [entity]="seriesMetadata"
+                                       [readingTimeLeft]="readingTimeLeft"
+                                       [ageRating]="seriesMetadata.ageRating"
+                                       [hasReadingProgress]="hasReadingProgress"
+                                       [readingTimeEntity]="series"
                                        [libraryType]="libraryType"
-                                       [webLinks]="WebLinks">
-                  </app-external-rating>
-                </div>
-            </div>  
+                                       [mangaFormat]="series.format">
+              </app-metadata-detail-row>
+
+              <div class="mt-2 mb-2">
+                <app-external-rating [seriesId]="series.id"
+                                     [ratings]="ratings"
+                                     [userRating]="series.userRating"
+                                     [hasUserRated]="series.hasUserRated"
+                                     [libraryType]="libraryType"
+                                     [webLinks]="WebLinks">
+                </app-external-rating>
+              </div>
+            </div>
           </div>
-            
+
           <div class="metadata-details-lower">
-              <div class="continue-container row g-0" style="align-items: center;">
-                  <div class="col-auto">
-                      <div class="btn-group">
-                          <button type="button" class="btn btn-outline-primary" (click)="read()">
+            <div class="continue-container row g-0" style="align-items: center;">
+              <div class="col-auto">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-outline-primary" (click)="read()">
                 <span>
                   <i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
-                  <span class="read-btn--text">&nbsp;{{(hasReadingProgress) ? t('continue') : t('read')}}</span>
+                  <span class="read-btn--text">&nbsp;{{ (hasReadingProgress) ? t('continue') : t('read') }}</span>
                 </span>
-                          </button>
-                          <div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')">
-                              <button type="button" class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
-                              <div class="dropdown-menu" ngbDropdownMenu>
-                                  <button ngbDropdownItem (click)="read(true)">
+                  </button>
+                  <div class="btn-group" ngbDropdown role="group" display="dynamic"
+                       [attr.aria-label]="t('read-options-alt')">
+                    <button type="button" class="btn btn-outline-primary dropdown-toggle-split"
+                            ngbDropdownToggle></button>
+                    <div class="dropdown-menu" ngbDropdownMenu>
+                      <button ngbDropdownItem (click)="read(true)">
                     <span>
                       <i class="fa fa-glasses" aria-hidden="true"></i>
-                      <span class="read-btn--text">&nbsp;{{(hasReadingProgress) ? t('continue-incognito') : t('read-incognito')}}</span>
+                      <span class="read-btn--text">&nbsp;{{ (hasReadingProgress) ? t('continue-incognito') : t('read-incognito') }}</span>
                     </span>
-                                  </button>
-                              </div>
-                          </div>
-                      </div>
+                      </button>
+                    </div>
                   </div>
-                    
-                  <div class="actions-row">
-                      <div class="col-auto ms-2">
-                          <button class="btn btn-actions" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
+                </div>
+              </div>
+
+              <div class="actions-row">
+                <div class="col-auto ms-2">
+                  <button class="btn btn-actions" (click)="toggleWantToRead()"
+                          ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
                   <span>
                       <i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
                   </span>
-                          </button>
-                      </div>
+                  </button>
+                </div>
 
-                      @if (isAdmin) {
-                          <div class="col-auto ms-2">
-                              <button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
-                                  <span><i class="fa fa-pen" aria-hidden="true"></i></span>
-                              </button>
-                          </div>
-                      }
-
-                      @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
-                          <div class="col-auto ms-2">
-                              <button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
-                                  <i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i>
-                              </button>
-                          </div>
-                      }
-
-                      <div class="col-auto ms-2">
-                          <div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
-                              <app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
-                          </div>
-                      </div>
-
-                      <div class="col-auto ms-2 d-none d-md-block btn-actions download">
-                          <app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
-                      </div>
+                @if (isAdmin) {
+                  <div class="col-auto ms-2">
+                    <button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()"
+                            [ngbTooltip]="t('edit-series-alt')">
+                      <span><i class="fa fa-pen" aria-hidden="true"></i></span>
+                    </button>
                   </div>
-              </div>
+                }
 
-              <div class="mt-2 mb-3">
-                  <app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
-              </div>
-
-              <div class="mt-2 upper-details">
-                  <div class="row g-0">
-                      <div class="col-6 pe-5">
-                          <span class="fw-bold">{{t('writers-title')}}</span>
-                          <div>
-                              <app-badge-expander [items]="seriesMetadata.writers"
-                                                  [itemsTillExpander]="3"
-                                                  [allowToggle]="false"
-                                                  (toggle)="switchTabsToDetail()">
-                                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
-                                      <a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
-                                  </ng-template>
-                              </app-badge-expander>
-                          </div>
-                      </div>
-                      <div class="col-6">
-                          <span class="fw-bold">{{t('publication-status-title')}}</span>
-                          <div>
-                              @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
-                                  <a class="dark-exempt btn-icon" (click)="openFilter(FilterField.PublicationStatus, seriesMetadata.publicationStatus)"
-                                     href="javascript:void(0);"
-                                     [ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
-                                      {{pubStatus}}
-                                  </a>
-                              }
-                          </div>
-                      </div>
+                @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
+                  <div class="col-auto ms-2">
+                    <button class="btn btn-actions" (click)="toggleScrobbling($event)"
+                            [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
+                      <i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}"
+                         aria-hidden="true"></i>
+                    </button>
                   </div>
-              </div>
+                }
 
-              <div class="mt-3 mb-2 upper-details">
-                  <div class="row g-0">
-                      <div class="col-6 pe-5">
-                          <span class="fw-bold">{{t('genres-title')}}</span>
-                          <div>
-                              <app-badge-expander [items]="seriesMetadata.genres"
-                                                  [itemsTillExpander]="3"
-                                                  [allowToggle]="false"
-                                                  (toggle)="switchTabsToDetail()">
-                                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
-                                      <a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Genres, item.id)">{{item.title}}</a>
-                                  </ng-template>
-                              </app-badge-expander>
-                          </div>
-                      </div>
-
-                      <div class="col-6">
-                          <span class="fw-bold">{{t('tags-title')}}</span>
-                          <div>
-                              <app-badge-expander [items]="seriesMetadata.tags"
-                                                  [itemsTillExpander]="3"
-                                                  [allowToggle]="false"
-                                                  (toggle)="switchTabsToDetail()">
-                                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
-                                      <a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Tags, item.id)">{{item.title}}</a>
-                                  </ng-template>
-                              </app-badge-expander>
-                          </div>
-                      </div>
+                <div class="col-auto ms-2">
+                  <div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
+                    <app-card-actionables [entity]="series" [inputActions]="seriesActions" [labelBy]="series.name"
+                                          iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
                   </div>
+                </div>
+
+                <div class="col-auto ms-2 d-none d-md-block btn-actions download">
+                  <app-download-button [download$]="download$" [entity]="series"
+                                       entityType="series"></app-download-button>
+                </div>
               </div>
+            </div>
+
+            <div class="mt-2 mb-3">
+              <app-read-more [text]="seriesMetadata.summary || ''"
+                             [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
+            </div>
+
+            <div class="mt-2 upper-details">
+              <div class="row g-0">
+                <div class="col-6 pe-5">
+                  <span class="fw-bold">{{ t('writers-title') }}</span>
+                  <div>
+                    <app-badge-expander [items]="seriesMetadata.writers"
+                                        [itemsTillExpander]="3"
+                                        [allowToggle]="false"
+                                        (toggle)="switchTabsToDetail()">
+                      <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
+                        <a routerLink="/person/{{encodeURIComponent(item.name)}}/"
+                           class="dark-exempt btn-icon">{{ item.name }}</a>
+                      </ng-template>
+                    </app-badge-expander>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <span class="fw-bold">{{ t('publication-status-title') }}</span>
+                  <div>
+                    @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
+                      <a class="dark-exempt btn-icon font-size"
+                         (click)="openFilter(FilterField.PublicationStatus, seriesMetadata!.publicationStatus)"
+                         href="javascript:void(0);"
+                         [ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
+                        {{ pubStatus }}
+                      </a>
+                    }
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-3 mb-2 upper-details">
+              <div class="row g-0">
+                <div class="col-6 pe-5">
+                  <span class="fw-bold">{{ t('genres-title') }}</span>
+                  <div>
+                    <app-badge-expander [items]="seriesMetadata.genres"
+                                        [itemsTillExpander]="3"
+                                        [allowToggle]="false"
+                                        (toggle)="switchTabsToDetail()">
+                      <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
+                        <a href="javascript:void(0)" class="dark-exempt btn-icon"
+                           (click)="openFilter(FilterField.Genres, item.id)">{{ item.title }}</a>
+                      </ng-template>
+                    </app-badge-expander>
+                  </div>
+                </div>
+
+                <div class="col-6">
+                  <span class="fw-bold">{{ t('tags-title') }}</span>
+                  <div>
+                    <app-badge-expander [items]="seriesMetadata.tags"
+                                        [itemsTillExpander]="3"
+                                        [allowToggle]="false"
+                                        (toggle)="switchTabsToDetail()">
+                      <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
+                        <a href="javascript:void(0)" class="dark-exempt btn-icon"
+                           (click)="openFilter(FilterField.Tags, item.id)">{{ item.title }}</a>
+                      </ng-template>
+                    </app-badge-expander>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
 
       <div class="carousel-tabs-container mb-2">
-        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" [destroyOnHide]="false" (navChange)="onNavChange($event)">
+        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" [destroyOnHide]="false"
+            (navChange)="onNavChange($event)">
 
           @if (showStorylineTab) {
             <li [ngbNavItem]="TabID.Storyline">
-              <a ngbNavLink>{{t(TabID.Storyline)}}</a>
+              <a ngbNavLink>{{ t(TabID.Storyline) }}</a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Storyline; prefetch on idle) {
-                  <virtual-scroller #scroll [items]="storylineItems" [bufferAmount]="1" [parentScroll]="scrollingBlock" [childHeight]="1">
+                  <virtual-scroller #scroll [items]="storylineItems" [bufferAmount]="1" [parentScroll]="scrollingBlock"
+                                    [childHeight]="1">
 
                     <div class="card-container row g-0" #container>
-                      @for(item of scroll.viewPortItems; let idx = $index; track item) {
+                      @for (item of scroll.viewPortItems; let idx = $index; track item) {
                         @if (item.isChapter) {
-                          <ng-container [ngTemplateOutlet]="nonSpecialChapterCard" [ngTemplateOutletContext]="{$implicit: item.chapter, scroll: scroll, idx: idx, chaptersLength: storyChapters.length}"></ng-container>
+                          <ng-container [ngTemplateOutlet]="nonSpecialChapterCard"
+                                        [ngTemplateOutletContext]="{$implicit: item.chapter, scroll: scroll, idx: idx, chaptersLength: storyChapters.length}"></ng-container>
                         } @else {
-                          <ng-container [ngTemplateOutlet]="nonChapterVolumeCard" [ngTemplateOutletContext]="{$implicit: item.volume, scroll: scroll, idx: idx, volumesLength: volumes.length}"></ng-container>
+                          <ng-container [ngTemplateOutlet]="nonChapterVolumeCard"
+                                        [ngTemplateOutletContext]="{$implicit: item.volume, scroll: scroll, idx: idx, volumesLength: volumes.length}"></ng-container>
                         }
                       }
 
-                      <ng-container [ngTemplateOutlet]="estimatedNextCard" [ngTemplateOutletContext]="{tabId: TabID.Storyline}"></ng-container>
+                      <ng-container [ngTemplateOutlet]="estimatedNextCard"
+                                    [ngTemplateOutletContext]="{tabId: TabID.Storyline}"></ng-container>
                     </div>
                   </virtual-scroller>
                 }
@@ -211,17 +230,20 @@
           @if (showVolumeTab) {
             <li [ngbNavItem]="TabID.Volumes">
               <a ngbNavLink>
-                {{UseBookLogic ? t('books-tab') : t('volumes-tab')}}
-                <span class="badge rounded-pill text-bg-secondary">{{volumes.length}}</span>
+                {{ UseBookLogic ? t('books-tab') : t('volumes-tab') }}
+                <span class="badge rounded-pill text-bg-secondary">{{ volumes.length }}</span>
               </a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Volumes; prefetch on idle) {
                   <virtual-scroller #scroll [items]="volumes" [parentScroll]="scrollingBlock" [childHeight]="1">
                     <div class="card-container row g-0" #container>
-                      @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead +  + '_volumes') {
-                        <ng-container [ngTemplateOutlet]="nonChapterVolumeCard" [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: volumes.length}"></ng-container>
+                      @for (item of scroll.viewPortItems; let
+                          idx = $index; track item.id + '_' + item.pagesRead + +'_volumes') {
+                        <ng-container [ngTemplateOutlet]="nonChapterVolumeCard"
+                                      [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: volumes.length}"></ng-container>
                       }
-                      <ng-container [ngTemplateOutlet]="estimatedNextCard" [ngTemplateOutletContext]="{tabId: TabID.Volumes}"></ng-container>
+                      <ng-container [ngTemplateOutlet]="estimatedNextCard"
+                                    [ngTemplateOutletContext]="{tabId: TabID.Volumes}"></ng-container>
                     </div>
                   </virtual-scroller>
                 }
@@ -232,17 +254,20 @@
           @if (showChapterTab) {
             <li [ngbNavItem]="TabID.Chapters">
               <a ngbNavLink>
-                {{utilityService.formatChapterName(libraryType)}}
-                <span class="badge rounded-pill text-bg-secondary">{{chapters.length}}</span>
+                {{ utilityService.formatChapterName(libraryType) }}
+                <span class="badge rounded-pill text-bg-secondary">{{ chapters.length }}</span>
               </a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Chapters; prefetch on idle) {
                   <virtual-scroller #scroll [items]="chapters" [parentScroll]="scrollingBlock" [childHeight]="1">
                     <div class="card-container row g-0" #container>
-                      @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + '_chapters') {
-                        <ng-container [ngTemplateOutlet]="nonSpecialChapterCard" [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: chapters.length}"></ng-container>
+                      @for (item of scroll.viewPortItems; let
+                          idx = $index; track item.id + '_' + item.pagesRead + '_chapters') {
+                        <ng-container [ngTemplateOutlet]="nonSpecialChapterCard"
+                                      [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: chapters.length}"></ng-container>
                       }
-                      <ng-container [ngTemplateOutlet]="estimatedNextCard" [ngTemplateOutletContext]="{tabId: TabID.Chapters}"></ng-container>
+                      <ng-container [ngTemplateOutlet]="estimatedNextCard"
+                                    [ngTemplateOutletContext]="{tabId: TabID.Chapters}"></ng-container>
                     </div>
                   </virtual-scroller>
                 }
@@ -253,15 +278,17 @@
           @if (hasSpecials) {
             <li [ngbNavItem]="TabID.Specials">
               <a ngbNavLink>
-                {{t(TabID.Specials)}}
-                <span class="badge rounded-pill text-bg-secondary">{{specials.length}}</span>
+                {{ t(TabID.Specials) }}
+                <span class="badge rounded-pill text-bg-secondary">{{ specials.length }}</span>
               </a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Specials; prefetch on idle) {
-                  <virtual-scroller #scroll [items]="specials"  [parentScroll]="scrollingBlock" [childHeight]="1">
+                  <virtual-scroller #scroll [items]="specials" [parentScroll]="scrollingBlock" [childHeight]="1">
                     <div class="card-container row g-0" #container>
-                      @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + '_specials') {
-                        <ng-container [ngTemplateOutlet]="specialChapterCard" [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, chaptersLength: chapters.length}"></ng-container>
+                      @for (item of scroll.viewPortItems; let
+                          idx = $index; track item.id + '_' + item.pagesRead + '_specials') {
+                        <ng-container [ngTemplateOutlet]="specialChapterCard"
+                                      [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, chaptersLength: chapters.length}"></ng-container>
                       }
                     </div>
                   </virtual-scroller>
@@ -273,8 +300,8 @@
           @if (hasRelations || readingLists.length > 0 || collections.length > 0 || bookmarks.length > 0) {
             <li [ngbNavItem]="TabID.Related">
               <a ngbNavLink>
-                {{t(TabID.Related)}}
-                <span class="badge rounded-pill text-bg-secondary">{{relations.length + readingLists.length + collections.length + (bookmarks.length > 0 ? 1 : 0)}}</span>
+                {{ t(TabID.Related) }}
+                <span class="badge rounded-pill text-bg-secondary">{{ relations.length + readingLists.length + collections.length + (bookmarks.length > 0 ? 1 : 0) }}</span>
               </a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Related; prefetch on idle) {
@@ -291,18 +318,20 @@
           @if (hasRecommendations) {
             <li [ngbNavItem]="TabID.Recommendations">
               <a ngbNavLink>
-                {{t(TabID.Recommendations)}}
-                <span class="badge rounded-pill text-bg-secondary">{{combinedRecs.length}}</span>
+                {{ t(TabID.Recommendations) }}
+                <span class="badge rounded-pill text-bg-secondary">{{ combinedRecs.length }}</span>
               </a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Recommendations; prefetch on idle) {
                   <virtual-scroller #scroll [items]="combinedRecs" [parentScroll]="scrollingBlock" [childHeight]="1">
                     <div class="card-container row g-0" #container>
-                      @for(item of scroll.viewPortItems; let idx = $index; track idx) {
+                      @for (item of scroll.viewPortItems; let idx = $index; track idx) {
                         @if (!item.hasOwnProperty('coverUrl')) {
-                          <app-series-card class="col-auto mt-2 mb-2" [series]="item" [previewOnClick]="true" [libraryId]="item.libraryId"></app-series-card>
+                          <app-series-card class="col-auto mt-2 mb-2" [series]="item" [previewOnClick]="true"
+                                           [libraryId]="item.libraryId"></app-series-card>
                         } @else {
-                          <app-external-series-card class="col-auto mt-2 mb-2" [previewOnClick]="true" [data]="item"></app-external-series-card>
+                          <app-external-series-card class="col-auto mt-2 mb-2" [previewOnClick]="true"
+                                                    [data]="item"></app-external-series-card>
                         }
                       }
                     </div>
@@ -314,19 +343,19 @@
 
           <li [ngbNavItem]="TabID.Reviews">
             <a ngbNavLink>
-              {{t(TabID.Reviews)}}
-              <span class="badge rounded-pill text-bg-secondary">{{reviews.length + plusReviews.length}}</span>
+              {{ t(TabID.Reviews) }}
+              <span class="badge rounded-pill text-bg-secondary">{{ reviews.length + plusReviews.length }}</span>
             </a>
             <ng-template ngbNavContent>
               @defer (when activeTabId === TabID.Reviews; prefetch on idle) {
-                <app-reviews [userReviews]="reviews" [plusReviews]="plusReviews" [series]="series" />
+                <app-reviews [userReviews]="reviews" [plusReviews]="plusReviews" [series]="series"/>
               }
             </ng-template>
           </li>
 
           @if (seriesMetadata && showDetailsTab) {
             <li [ngbNavItem]="TabID.Details" id="details-tab">
-              <a ngbNavLink>{{t(TabID.Details)}}</a>
+              <a ngbNavLink>{{ t(TabID.Details) }}</a>
               <ng-template ngbNavContent>
                 @defer (when activeTabId === TabID.Details; prefetch on idle) {
                   <app-details-tab [metadata]="seriesMetadata"
@@ -359,10 +388,12 @@
             }
           }
           @case (TabID.Chapters) {
-            <app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter" [imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card>
+            <app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter"
+                                    [imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card>
           }
           @case (TabID.Storyline) {
-            <app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter" [imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card>
+            <app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter"
+                                    [imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card>
           }
         }
       }
@@ -378,15 +409,18 @@
                     [actions]="chapterActions"
                     [libraryType]="libraryType"
                     (selection)="bulkSelectionService.handleCardSelection('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
-                    [selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true">
+                    [selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)"
+                    [allowSelection]="true">
   </app-chapter-card>
 </ng-template>
 
 <ng-template #nonChapterVolumeCard let-item let-scroll="scroll" let-idx="idx" let-totalLength="totalLength">
-  <app-volume-card class="col-auto mt-2 mb-2" [volume]="item" [seriesId]="seriesId" [libraryId]="libraryId" [libraryType]="libraryType"
+  <app-volume-card class="col-auto mt-2 mb-2" [volume]="item" [seriesId]="seriesId" [libraryId]="libraryId"
+                   [libraryType]="libraryType"
                    [actions]="volumeActions"
                    (selection)="bulkSelectionService.handleCardSelection('volume', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
-                   [selected]="bulkSelectionService.isCardSelected('volume', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true">
+                   [selected]="bulkSelectionService.isCardSelected('volume', scroll.viewPortInfo.startIndexWithBuffer + idx)"
+                   [allowSelection]="true">
   </app-volume-card>
 </ng-template>
 
@@ -396,6 +430,7 @@
                     [actions]="chapterActions"
                     [libraryType]="libraryType"
                     (selection)="bulkSelectionService.handleCardSelection('special', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
-                    [selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true">
+                    [selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)"
+                    [allowSelection]="true">
   </app-chapter-card>
 </ng-template>