diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss b/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
index 30b472c93..be328ccd5 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
@@ -98,7 +98,6 @@ $mobile-landscape-height: 100vh;
   height: 56.25vw;
   max-height: 700px;
   background-color: var(--hero-shelf-background-color);
-  transition: opacity ease-out 0.3s;
 
   @include responsive.tablet-only() {
     height: $tablet-height;
@@ -196,8 +195,8 @@ $mobile-landscape-height: 100vh;
   display: flex;
   flex-direction: column;
   gap: 24px;
-  width: 46%;
-  max-width: 46%;
+  min-width: 50%;
+  max-width: 50%;
   padding-left: calc(variables.$base-spacing * 4);
 
   > h2 {
@@ -233,13 +232,23 @@ $mobile-landscape-height: 100vh;
   }
 
   @include responsive.mobile-only-landscape() {
-    max-width: 70%;
     min-height: initial;
     padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+
+    > h2 {
+      font-size: 24px;
+    }
+    > div {
+      font-size: 14px;
+    }
   }
 
   @include responsive.tablet-small-only() {
     padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+
+    > div > button {
+      width: auto !important; // Override StartWatchingButton fullWidth prop
+    }
   }
 
   @include responsive.mobile-only() {
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
index 7cf16dc78..c580f8a6f 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
@@ -32,7 +32,7 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
   const [animationPhase, setAnimationPhase] = useState<'init' | 'start' | 'end' | null>(null);
   const [isSwipeAnimation, setIsSwipeAnimation] = useState(false);
 
-  useScrolledDown(50, isMobile ? 200 : 700, (progress: number) => {
+  useScrolledDown(50, isMobile ? 200 : 600, (progress: number) => {
     if (posterRef.current) posterRef.current.style.opacity = `${Math.max(1 - progress, isMobile ? 0 : 0.1)}`;
   });
 
@@ -182,14 +182,7 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
           />
         )}
         renderItem={() => (
-          <HeroShelfMetadata
-            loading={loading}
-            item={renderedItem}
-            playlistId={playlist.feedid}
-            isMobile={isMobile}
-            key={renderedItem?.mediaid}
-            style={getMetadataStyle()}
-          />
+          <HeroShelfMetadata loading={loading} item={renderedItem} playlistId={playlist.feedid} key={renderedItem?.mediaid} style={getMetadataStyle()} />
         )}
         renderRightItem={(isSwiping: boolean) => (
           <HeroShelfMetadata
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
index af10fccca..7e40db160 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
@@ -28,12 +28,11 @@ const HeroShelfMetadata = ({
   playlistId: string | undefined;
   style: CSSProperties;
   hidden?: boolean;
-  isMobile?: boolean;
 }) => {
   const navigate = useNavigate();
   const { t } = useTranslation('common');
   const breakpoint = useBreakpoint();
-  const isMobile = breakpoint <= Breakpoint.sm;
+  const isMobile = breakpoint < Breakpoint.sm;
 
   if (!item) return null;
 
diff --git a/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx b/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
index 6bac4e6b6..7069f68db 100644
--- a/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
+++ b/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
@@ -18,6 +18,8 @@ const TruncatedText: React.FC<TruncatedTextProps> = ({ text, maximumLines, class
       style={{
         maxHeight: `calc(1.5em * ${maximumLines})`,
         WebkitLineClamp: maximumLines,
+        lineClamp: maximumLines,
+        display: '-webkit-box',
       }}
     >
       <MarkdownComponent markdownString={text} inline />