Title+Group Overflow Tweaks / Original Language Fix / Modals Fix (#1013)

* Title+Group Overflow Tweaks / Original Language Fix / Modals Fix

- center the overflow on the series page for the preferred title
- change "Entire Collection" to "Collection" to make more room for titles
- stop long group names on the collection page going multiline and breaking the display
- force the original language title to be "official" on the series page to avoid displaying title cards, synonyms or short versions
- allow modals to scroll when they run out of vertical space instead of breaking

* Apply Suggestions

src/components/Collection/CollectionTitle.tsx

@@ -12,33 +12,38 @@ type Props = {
 };
 
 const CollectionTitle = memo(({ count, filterActive, filterOrGroup, searchQuery }: Props) => (
-  <div className="flex items-center gap-x-2 text-xl font-semibold">
+  <div className="flex items-center min-w-0 gap-x-2 text-xl font-semibold">
     <Link to="/webui/collection" className={cx(filterOrGroup ? 'text-panel-text-primary' : 'pointer-events-none')}>
-      Entire Collection
+      Collection
     </Link>
     {filterOrGroup && (
       <>
-        <Icon path={mdiChevronRight} size={1} />
-        {filterOrGroup}
+        <Icon className="flex-none" path={mdiChevronRight} size={1} />
+        <span className="truncate">
+          {filterOrGroup}
+        </span>
       </>
     )}
     {!filterOrGroup && filterActive && (
       <>
-        <Icon path={mdiChevronRight} size={1} />
+        <Icon className="flex-none" path={mdiChevronRight} size={1} />
         Filtered
       </>
     )}
     {searchQuery && (
       <>
-        <Icon path={mdiChevronRight} size={1} />
-        Search Results
+        <Icon className="flex-none" path={mdiChevronRight} size={1} />
+        <span className="flex-none">
+          Search Results
+        </span>
       </>
     )}
     {count >= 0 && (
       <>
         <span>|</span>
-        <span className="text-panel-text-important">
+        <span className="flex-none text-panel-text-important">
           {`${count} Items`}
+          &nbsp;
         </span>
       </>
     )}

src/components/Panels/ModalPanel.tsx

@@ -47,17 +47,17 @@ function ModalPanel(props: Props) {
     <Modal
       isOpen={show}
       overlayClassName={cx('fixed inset-0 bg-black/50 z-[80]', overlayClassName)}
-      className="mt-10 flex h-full items-center justify-center"
+      className="mt-20 flex h-full items-center justify-center"
       onAfterOpen={onAfterOpen}
       closeTimeoutMS={150}
     >
       <div className="flex size-full items-center justify-center" onClick={onRequestClose}>
         <div
           className={cx(
-            'flex flex-col rounded-lg border border-panel-border bg-panel-background drop-shadow-lg',
+            'flex flex-col rounded-lg border border-panel-border bg-panel-background drop-shadow-lg shoko-scrollbar overflow-y-auto',
             sizeClass[size ?? 'md'],
             !noPadding && ('gap-y-6'),
-            fullHeight ? 'h-[66%]' : 'max-h-[66%]',
+            fullHeight ? 'h-[75%]' : 'max-h-[75%]',
             className,
           )}
           onClick={e => e.stopPropagation()}

src/pages/collection/Series.tsx

@@ -68,7 +68,7 @@ const Series = () => {
   const [mainTitle, originalTitle] = useMemo(() => {
     const tempMainTitle = series.AniDB?.Titles.find(title => title.Type === 'Main');
     const tempOriginalTitle = series.AniDB?.Titles.find(
-      title => title.Language === languageMapping[tempMainTitle?.Language ?? ''],
+      title => title.Language === languageMapping[tempMainTitle?.Language ?? ''] && title.Type === 'Official',
     );
     return [
       (tempMainTitle && tempMainTitle.Name !== series.Name) ? <span>{tempMainTitle.Name}</span> : null,
@@ -114,9 +114,9 @@ const Series = () => {
       <div className="my-6 flex flex-col items-center gap-y-3">
         <div className="flex flex-row items-center gap-x-4">
           <Link className="text-xl font-semibold text-panel-text-primary" to="/webui/collection">
-            Entire Collection
+            Collection
           </Link>
-          <Icon className="text-panel-icon" path={mdiChevronRight} size={1} />
+          <Icon className="flex-none text-panel-icon" path={mdiChevronRight} size={1} />
           {groupQuery.isSuccess && groupQuery.data.Size > 1 && (
             <>
               <Link
@@ -125,11 +125,11 @@ const Series = () => {
               >
                 {groupQuery.data.Name}
               </Link>
-              <Icon className="text-panel-icon" path={mdiChevronRight} size={1} />
+              <Icon className="flex-none text-panel-icon" path={mdiChevronRight} size={1} />
             </>
           )}
         </div>
-        <div className="text-4xl font-semibold">{series.Name}</div>
+        <div className="text-center text-4xl font-semibold">{series.Name}</div>
         <div className="flex gap-x-3 text-xl font-semibold opacity-65">
           {mainTitle}
           {mainTitle && originalTitle && <span>|</span>}