diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx
index c9d87368a..ac32f1c99 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx
+++ b/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="movie-studio">{movie?.studio?.name}</span>
+          <>
+            <span className="detail-divider">/</span>
+            <span className="movie-studio">{movie?.studio?.name}</span>
+          </>
         ) : (
           ""
         )}
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
index 7cf1fab02..84faefe63 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
@@ -329,34 +329,43 @@ export const CompressedPerformerDetailsPanel: React.FC<IPerformerDetails> = ({
         <a className="performer-name" onClick={() => scrollToTop()}>
           {performer.name}
         </a>
-        <span className="detail-divider">/</span>
         {performer.gender ? (
-          <span className="performer-gender">
-            {intl.formatMessage({ id: "gender_types." + performer.gender })}
-          </span>
+          <>
+            <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="performer-age"
-            title={TextUtils.formatDate(intl, performer.birthdate ?? undefined)}
-          >
-            {TextUtils.age(performer.birthdate, performer.death_date)}
-          </span>
+          <>
+            <span className="detail-divider">/</span>
+            <span
+              className="performer-age"
+              title={TextUtils.formatDate(
+                intl,
+                performer.birthdate ?? undefined
+              )}
+            >
+              {TextUtils.age(performer.birthdate, performer.death_date)}
+            </span>
+          </>
         ) : (
           ""
         )}
-        <span className="detail-divider">/</span>
         {performer.country ? (
-          <span className="performer-country">
-            <CountryFlag
-              country={performer.country}
-              className="mr-2"
-              includeName={true}
-            />
-          </span>
+          <>
+            <span className="detail-divider">/</span>
+            <span className="performer-country">
+              <CountryFlag
+                country={performer.country}
+                className="mr-2"
+                includeName={true}
+              />
+            </span>
+          </>
         ) : (
           ""
         )}
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx
index d2dde34ae..c5c132942 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx
+++ b/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="studio-parent">{studio?.parent_studio?.name}</span>
+          <>
+            <span className="detail-divider">/</span>
+            <span className="studio-parent">{studio?.parent_studio?.name}</span>
+          </>
         ) : (
           ""
         )}
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
index 03c661840..3400dd7d8 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
+++ b/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="tag-desc">{tag.description}</span>
+          <>
+            <span className="detail-divider">/</span>
+            <span className="tag-desc">{tag.description}</span>
+          </>
         ) : (
           ""
         )}
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
index 1d19667bb..0bcf55cd2 100755
--- a/ui/v2.5/src/index.scss
+++ b/ui/v2.5/src/index.scss
@@ -374,19 +374,21 @@ 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 {
-  .detail-header {
-    .detail-container {
-      display: flex;
+  @media (min-width: 576px) {
+    .detail-header {
+      .detail-container {
+        display: flex;
+      }
     }
-  }
 
-  .detail-header.edit .row {
-    flex: 1;
-  }
+    .detail-header.edit .row {
+      flex: 1;
+    }
 
-  .detail-header.full-width .detail-header-image,
-  .detail-header.edit .detail-header-image {
-    display: unset;
+    .detail-header.full-width .detail-header-image,
+    .detail-header.edit .detail-header-image {
+      display: unset;
+    }
   }
 }
 
diff --git a/ui/v2.5/src/utils/apple.ts b/ui/v2.5/src/utils/apple.ts
index d2618b8fc..580399189 100644
--- a/ui/v2.5/src/utils/apple.ts
+++ b/ui/v2.5/src/utils/apple.ts
@@ -1,6 +1,9 @@
+import UAParser from "ua-parser-js";
+
 export function isPlatformUniquelyRenderedByApple() {
-  return (
-    /(ipad)/i.test(navigator.userAgent) ||
-    /(macintosh.*safari)/i.test(navigator.userAgent)
-  );
+  // OS name on iPads show up as iOS or Max OS depending on the browser.
+  const isiOS = UAParser().os.name?.includes("iOS");
+  const isMacOS = UAParser().os.name?.includes("Mac OS");
+  const isSafari = UAParser().browser.name?.includes("Safari");
+  return isiOS || (isMacOS && isSafari);
 }