fix separator being used around null fields (#3996)

* fix separator being used around null fields
* updated apple.ts code to use UAParser

ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx

@@ -64,9 +64,11 @@ export const CompressedMovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
         <a className="movie-name" onClick={() => scrollToTop()}>
           {movie.name}
         </a>
-        <span className="detail-divider">/</span>
         {movie?.studio?.name ? (
+          <>
+            <span className="detail-divider">/</span>
             <span className="movie-studio">{movie?.studio?.name}</span>
+          </>
         ) : (
           ""
         )}

ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx

@@ -329,27 +329,35 @@ export const CompressedPerformerDetailsPanel: React.FC<IPerformerDetails> = ({
         <a className="performer-name" onClick={() => scrollToTop()}>
           {performer.name}
         </a>
-        <span className="detail-divider">/</span>
         {performer.gender ? (
+          <>
+            <span className="detail-divider">/</span>
             <span className="performer-gender">
               {intl.formatMessage({ id: "gender_types." + performer.gender })}
             </span>
+          </>
         ) : (
           ""
         )}
-        <span className="detail-divider">/</span>
         {performer.birthdate ? (
+          <>
+            <span className="detail-divider">/</span>
             <span
               className="performer-age"
-            title={TextUtils.formatDate(intl, performer.birthdate ?? undefined)}
+              title={TextUtils.formatDate(
+                intl,
+                performer.birthdate ?? undefined
+              )}
             >
               {TextUtils.age(performer.birthdate, performer.death_date)}
             </span>
+          </>
         ) : (
           ""
         )}
-        <span className="detail-divider">/</span>
         {performer.country ? (
+          <>
+            <span className="detail-divider">/</span>
             <span className="performer-country">
               <CountryFlag
                 country={performer.country}
@@ -357,6 +365,7 @@ export const CompressedPerformerDetailsPanel: React.FC<IPerformerDetails> = ({
                 includeName={true}
               />
             </span>
+          </>
         ) : (
           ""
         )}

ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx

@@ -89,9 +89,11 @@ export const CompressedStudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
         <a className="studio-name" onClick={() => scrollToTop()}>
           {studio.name}
         </a>
-        <span className="detail-divider">/</span>
         {studio?.parent_studio?.name ? (
+          <>
+            <span className="detail-divider">/</span>
             <span className="studio-parent">{studio?.parent_studio?.name}</span>
+          </>
         ) : (
           ""
         )}

ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx

@@ -79,9 +79,11 @@ export const CompressedTagDetailsPanel: React.FC<ITagDetails> = ({ tag }) => {
         <a className="tag-name" onClick={() => scrollToTop()}>
           {tag.name}
         </a>
-        <span className="detail-divider">/</span>
         {tag.description ? (
+          <>
+            <span className="detail-divider">/</span>
             <span className="tag-desc">{tag.description}</span>
+          </>
         ) : (
           ""
         )}

ui/v2.5/src/index.scss

@@ -374,6 +374,7 @@ dd {
 /* the .apple class denotes areas where rendering on some apple platforms has been inconsistent with other platforms
    these rules aim to address those inconsistences */
 .apple {
+  @media (min-width: 576px) {
     .detail-header {
       .detail-container {
         display: flex;
@@ -388,6 +389,7 @@ dd {
     .detail-header.edit .detail-header-image {
       display: unset;
     }
+  }
 }
 
 .detail-item-title {

ui/v2.5/src/utils/apple.ts

@@ -1,6 +1,9 @@
+import UAParser from "ua-parser-js";
+
 export function isPlatformUniquelyRenderedByApple() {
-  return (
+  // OS name on iPads show up as iOS or Max OS depending on the browser.
-    /(ipad)/i.test(navigator.userAgent) ||
+  const isiOS = UAParser().os.name?.includes("iOS");
-    /(macintosh.*safari)/i.test(navigator.userAgent)
+  const isMacOS = UAParser().os.name?.includes("Mac OS");
-  );
+  const isSafari = UAParser().browser.name?.includes("Safari");
+  return isiOS || (isMacOS && isSafari);
 }