From 9b6b2c6df1d69f9529bea1a1ff6c780543ab75b0 Mon Sep 17 00:00:00 2001
From: Christopher <39032787+MrRobotjs@users.noreply.github.com>
Date: Sun, 4 May 2025 21:37:19 -0600
Subject: [PATCH] series detail page mobile redesign

---
 UI/Web/src/_series-detail-common.scss         | 260 ++++++++-------
 .../series-detail.component.html              | 310 +++++++++---------
 UI/Web/src/theme/_variables.scss              |   1 +
 3 files changed, 308 insertions(+), 263 deletions(-)

diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss
index f043dec17..1f17ed6ec 100644
--- a/UI/Web/src/_series-detail-common.scss
+++ b/UI/Web/src/_series-detail-common.scss
@@ -1,26 +1,141 @@
 @use './theme/variables' as theme;
 
-.title {
-  color: white;
-  font-weight: bold;
-  font-size: 1.75rem;
-}
-
-.image-container {
-  align-self: flex-start;
-  max-height: 400px;
-  max-width: 280px;
-}
-
-.subtitle {
-  color: lightgrey;
-  font-weight: bold;
-  font-size: 0.8rem;
-}
-
 .main-container {
   overflow: unset !important;
-  margin-top: 15px;
+  margin-top: 0.9375rem;
+  
+  .info-container {
+    .image-container-background.series {
+      display: none;
+    }
+    .info-grid-container {
+      display: grid;
+      grid-template-columns: 20% 80%;
+      grid-template-rows: auto auto;
+      .image-container {
+        grid-column: 1;
+        grid-row: 1 / 3;
+        margin-right: 1.5rem;
+      }
+      .metadata-details-upper {
+        display: flex;
+        flex-direction:  column;
+        justify-content: center;
+        grid-column: 2;
+        grid-row: 1;
+        .title {
+          color: white;
+          font-weight: bold;
+          font-size: 1.75rem;
+        }
+        .subtitle {
+          color: lightgrey;
+          font-weight: bold;
+          font-size: 0.8rem;
+        }
+      }
+      .metadata-details-lower {
+        grid-column: 2;
+        grid-row: 2;
+        .continue-container {
+          display: flex;
+          .actions-row {
+            display: flex;
+            width: unset;
+          }
+        }
+        .upper-details {
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  .carousel-tabs-container {
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-width: none;
+    box-shadow: inset -0.0625rem -0.125rem 0.0rem -0.0625rem var(--elevation-layer9);
+    .nav-tabs {
+      flex-wrap: nowrap;
+    }
+  }
+}
+
+@media (max-width: theme.$grid-breakpoints-lg) {
+  .main-container {
+    .info-container {
+      .info-grid-container {
+        grid-template-columns: 30% 70%;
+      }
+    }
+  }
+}
+
+@media (max-width: theme.$grid-breakpoints-sm) {
+  .main-container {
+    .info-container {
+      .info-grid-container {
+        grid-template-columns: 35% 65%;
+        grid-template-rows: auto auto;
+
+        .image-container {
+          display: block !important;
+          grid-column: 1;
+          grid-row: 1;
+          margin-right: 1rem;
+        }
+
+        .metadata-details-upper {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          grid-column: 2;
+          grid-row: 1;
+          .title {
+            font-size: 1.375rem;
+          }
+          .subtitle {
+            font-size: 0.625rem;
+          }
+        }
+
+        .metadata-details-lower {
+          grid-column: 1 / 3;
+          grid-row: 2;
+          .continue-container {
+            margin-top: 1rem;
+          }
+        }
+      }
+    }
+  }
+  :host ::ng-deep {
+    .read-more-cont {
+      div {
+        max-width: unset !important;
+      }
+    }
+  }
+}
+
+@media (max-width: theme.$grid-breakpoints-smm) {
+  .main-container {
+    .info-container {
+      .info-grid-container {
+        .metadata-details-lower {
+          .continue-container {
+            flex-direction: column;
+            .actions-row {
+              margin-top: 0.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 ::ng-deep .badge-expander .content a {
@@ -30,15 +145,15 @@
 .btn-group > .btn.dropdown-toggle-split:not(first-child){
   border-top-right-radius: var(--bs-border-radius) !important;
   border-bottom-right-radius: var(--bs-border-radius) !important;
-  border-width: 1px 1px 1px 0 !important;
+  border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important;
 }
 
 .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
-  border-width: 1px 0 1px 1px !important;
+  border-width: 0.0625rem 0 0.0625rem 0.0625rem !important;
 }
 
 .card-body > div:nth-child(2) {
-  height: 50px;
+  height: 3.125rem;
   overflow: hidden;
   -webkit-line-clamp: 2;
   display: -webkit-box;
@@ -46,97 +161,16 @@
   -webkit-box-orient: vertical;
 }
 
-.under-image  ~ .overlay-information {
-  top: -404px;
-  height: 364px;
-}
-
-.overlay-information {
-  position: relative;
-  top: -364px;
-  height: 364px;
-  transition: all 0.2s;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-
-  &:hover {
-    cursor: pointer;
-    background-color: var(--card-overlay-hover-bg-color) !important;
-
-    .overlay-information--centered {
-      visibility: visible;
-    }
-  }
-
-  .overlay-information--centered {
-    position: absolute;
-    border-radius: 15px;
-    background-color: rgba(0, 0, 0, .7);
-    border-radius: 50px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 115;
-    visibility: hidden;
-
-    &:hover {
-      background-color: var(--primary-color) !important;
-      cursor: pointer;
-    }
-
-    div {
-      width: 60px;
-      height: 60px;
-      i {
-        font-size: 1.6rem;
-        line-height: 60px;
-        width: 100%;
-      }
-    }
-  }
-}
-
-.progress {
-  border-radius: 0;
-}
-
-.progress-banner.series {
-  position: relative;
-}
-
-::ng-deep .progress-banner.series span {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  top: 50%;
-}
-
-.carousel-tabs-container {
-  overflow-x: auto;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  scrollbar-width: none;
-  box-shadow: inset -1px -2px 0px -1px var(--elevation-layer9);
-}
 .carousel-tabs-container::-webkit-scrollbar {
   display: none;
 }
-.nav-tabs {
-  flex-wrap: nowrap;
-}
-
-.upper-details {
-  font-size: 0.9rem;
-}
 
 ::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{
-  border-width: 1px;
+  border-width: 0.0625rem;
   border-style: solid;
-  border-radius: 5px;
+  border-radius: 0.3125rem;
   border-color: var(--primary-color);
-  padding: 5px;
+  padding: 0.3125rem;
   vertical-align: middle;
 
   &:hover {
@@ -144,8 +178,8 @@
   }
 }
 
-::ng-deep .image-container.mobile-bg app-image img {
-  max-height: 400px;
+::ng-deep .image-container-background.mobile-bg app-image img {
+  max-height: 25rem;
   object-fit: contain;
 }
 
@@ -156,16 +190,16 @@
   }
 }
 
-::ng-deep .image-container.mobile-bg app-image img {
+::ng-deep .image-container-background.mobile-bg app-image img {
   max-height: 100dvh !important;
   object-fit: cover !important;
 }
 
 /* col-lg */
 @media (max-width: theme.$grid-breakpoints-lg) {
-  .image-container.mobile-bg{
+  .image-container-background.mobile-bg{
     width: 100vw;
-    top: calc(var(--nav-offset) - 20px);
+    top: calc(var(--nav-offset) - 1.25rem);
     left: 0;
     pointer-events: none;
     position: fixed !important;
@@ -175,10 +209,10 @@
     height: 100dvh !important;
   }
 
-  ::ng-deep .image-container.mobile-bg app-image img {
+  ::ng-deep .image-container-background.mobile-bg app-image img {
     max-height: unset !important;
     opacity: 0.05 !important;
-    filter: blur(5px) !important;
+    filter: blur(0.3125rem) !important;
     max-width: 100dvw;
     height: 100dvh !important;
     overflow: hidden;
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 6d39b0b28..0c69a6740 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,173 +4,183 @@
   @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 [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-bg' : ''"
-             class="image-container series col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
+             class="image-container-background series col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 mb-3 position-relative">
           <app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
         </div>
-
-        <div class="col-xl-10 col-lg-7 col-md-12 col-sm-12 col-xs-12">
-          <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 class="info-grid-container">
+          <div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-image' : ''"
+               class="image-container series position-relative">
+            <app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
           </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"
-                                 [libraryType]="libraryType"
-                                 [webLinks]="WebLinks">
-            </app-external-rating>
-          </div>
-
-          <div class="mt-3 mb-3">
-            <div class="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>
-                  </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>
-                      </button>
+            
+          <div class="metadata-details-upper">
+            <div class="metadata-details-wrapper">
+                <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>
-                  </div>
+                    }
+                </span>
+                </h4>
+                <div class="subtitle mt-2 mb-2">
+                  @if (series.localizedName !== series.name && series.localizedName) {
+                    <span>{{series.localizedName | defaultValue}}</span>
+                  }
                 </div>
-              </div>
-
-              <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')}}">
+    
+                <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"
+                                       [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()">
+                <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>
+                          </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>
+                                  </button>
+                              </div>
+                          </div>
+                      </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>
+                          </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">
+                          <app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
+                      </div>
+                  </div>
               </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 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="col-auto ms-2 d-none d-md-block btn-actions">
-                <app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
+              <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>
+                  </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="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 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 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>
-            </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>
diff --git a/UI/Web/src/theme/_variables.scss b/UI/Web/src/theme/_variables.scss
index 1ffbdeb54..a254053e6 100644
--- a/UI/Web/src/theme/_variables.scss
+++ b/UI/Web/src/theme/_variables.scss
@@ -16,6 +16,7 @@ $accordion-icon-active-color: #cecece;
 
 
 $grid-breakpoints-xs: 0;
+$grid-breakpoints-smm: 327px;
 $grid-breakpoints-sm: 576px;
 $grid-breakpoints-md: 768px;
 $grid-breakpoints-lg: 992px;