Details redesign bug fixes (#3982)

* setting page top padding
* better age tooltip full width fix with table improvment

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

@@ -35,6 +35,7 @@ import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "src/core/config";
 import ImageUtils from "src/utils/image";
 import { useRatingKeybinds } from "src/hooks/keybinds";
+import { isPlatformUniquelyRenderedByApple } from "src/utils/apple";
 
 interface IProps {
   movie: GQL.MovieDataFragment;
@@ -64,6 +65,8 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
   const [backImage, setBackImage] = useState<string | null>();
   const [encodingImage, setEncodingImage] = useState<boolean>(false);
 
+  const appleRendering = isPlatformUniquelyRenderedByApple();
+
   const defaultImage =
     movie.front_image_path && movie.front_image_path.includes("default=true")
       ? true
@@ -414,7 +417,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        } ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

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

@@ -43,6 +43,7 @@ import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { IUIConfig } from "src/core/config";
 import { useRatingKeybinds } from "src/hooks/keybinds";
 import ImageUtils from "src/utils/image";
+import { isPlatformUniquelyRenderedByApple } from "src/utils/apple";
 
 interface IProps {
   performer: GQL.PerformerDataFragment;
@@ -72,6 +73,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
   const [encodingImage, setEncodingImage] = useState<boolean>(false);
   const [loadStickyHeader, setLoadStickyHeader] = useState<boolean>(false);
 
+  const appleRendering = isPlatformUniquelyRenderedByApple();
+
   const activeImage = useMemo(() => {
     const performerImage = performer.image_path;
     if (isEditing) {
@@ -546,7 +549,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        } ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

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

@@ -186,6 +186,11 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
             value={performer?.piercings}
             fullWidth={fullWidth}
           />
+          <DetailItem
+            id="career_length"
+            value={performer?.career_length}
+            fullWidth={fullWidth}
+          />
           <DetailItem id="details" value={details} fullWidth={fullWidth} />
           <DetailItem
             id="tags"

ui/v2.5/src/components/Shared/GridCard.tsx

@@ -34,8 +34,9 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
     if (props.selecting) {
       props.onSelectedChanged(!props.selected, shiftKey);
       event.preventDefault();
+    } else {
+      window.scrollTo(0, 0);
     }
-    window.scrollTo(0, 0);
   }
 
   function handleDrag(event: React.DragEvent<HTMLElement>) {

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

@@ -42,6 +42,7 @@ import TextUtils from "src/utils/text";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import ImageUtils from "src/utils/image";
 import { useRatingKeybinds } from "src/hooks/keybinds";
+import { isPlatformUniquelyRenderedByApple } from "src/utils/apple";
 
 interface IProps {
   studio: GQL.StudioDataFragment;
@@ -68,6 +69,8 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
   const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
   const [loadStickyHeader, setLoadStickyHeader] = useState<boolean>(false);
 
+  const appleRendering = isPlatformUniquelyRenderedByApple();
+
   // Editing state
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
@@ -504,7 +507,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        }  ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

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

@@ -38,6 +38,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { IUIConfig } from "src/core/config";
 import ImageUtils from "src/utils/image";
+import { isPlatformUniquelyRenderedByApple } from "src/utils/apple";
 
 interface IProps {
   tag: GQL.TagDataFragment;
@@ -63,6 +64,8 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
   const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
   const [loadStickyHeader, setLoadStickyHeader] = useState<boolean>(false);
 
+  const appleRendering = isPlatformUniquelyRenderedByApple();
+
   const { tab = "scenes" } = useParams<ITabParams>();
 
   // Editing state
@@ -496,7 +499,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        } ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

ui/v2.5/src/index.scss

@@ -43,7 +43,7 @@ body {
   -webkit-font-smoothing: antialiased;
   margin: 0;
   overflow-x: hidden;
-  padding: 3.5rem 0 0 0;
+  padding: 4rem 0 0 0;
 
   @include media-breakpoint-down(xs) {
     @media (orientation: portrait) {
@@ -52,6 +52,13 @@ body {
   }
 }
 
+#movie-page,
+#performer-page,
+#studio-page,
+#tag-page {
+  margin-top: -0.5rem;
+}
+
 code,
 .code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
@@ -188,6 +195,7 @@ dd {
 
 .detail-header.edit {
   background-color: unset;
+  overflow: auto;
 
   form {
     padding-top: 0.5rem;
@@ -241,7 +249,7 @@ dd {
   }
 
   .detail-item {
-    flex-direction: unset;
+    display: table;
     padding-right: 0;
     width: 100%;
 
@@ -251,7 +259,11 @@ dd {
     }
 
     .detail-item-value {
-      padding-left: 0.5rem;
+      margin-left: 1.5rem;
+    }
+
+    .detail-item-value.age {
+      width: fit-content;
     }
   }
 
@@ -336,7 +348,6 @@ dd {
 }
 
 .detail-item {
-  align-items: left;
   display: inline-flex;
   flex-direction: column;
   padding-bottom: 0.5rem;
@@ -347,6 +358,17 @@ 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 */
+.detail-header.apple .detail-container {
+  display: flex;
+}
+
+.detail-header.full-width.apple .detail-header-image,
+.detail-header.edit.apple .detail-header-image {
+  display: unset;
+}
+
 .detail-item-title {
   color: #868791;
   font-weight: 700;

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

@@ -0,0 +1,6 @@
+export function isPlatformUniquelyRenderedByApple() {
+  return (
+    /(ipad)/i.test(navigator.userAgent) ||
+    /(macintosh.*safari)/i.test(navigator.userAgent)
+  );
+}