iOS 26: Update readable guide for Reader Article view (#24813)

* Update readable guide for Reader Article

* Didsable accessibility for button that sohuld not change size

Author: kean

WordPress/Classes/ViewRelated/Reader/Detail/ReaderDetailViewController.swift

@@ -173,8 +173,6 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
 
             headerContainerView.clipsToBounds = true
             headerContainerView.backgroundColor = .systemBackground
-            headerContainerView.layer.cornerRadius = DesignConstants.radius(.large)
-            headerContainerView.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]
         }
 
         // Fixes swipe to go back not working when leftBarButtonItem is set
@@ -235,6 +233,14 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
         scrollView
     }
 
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        let isCompact = traitCollection.horizontalSizeClass == .compact
+        headerContainerView.layer.cornerRadius = isCompact ? DesignConstants.radius(.large) : 0
+        headerContainerView.layer.maskedCorners = isCompact ? [.layerMaxXMinYCorner, .layerMinXMinYCorner] : []
+    }
+
     func render(_ post: ReaderPost) {
         configureDiscoverAttribution(post)
 
@@ -444,13 +450,10 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
 
     /// Apply view styles
     @MainActor private func applyStyles() {
-        guard let readableGuide = webView.superview?.readableContentGuide else {
-            return
-        }
-
+        webView.pinEdges(.horizontal, to: view, insets: UIEdgeInsets(.horizontal, 16), priority: .init(950))
         NSLayoutConstraint.activate([
-            webView.rightAnchor.constraint(equalTo: readableGuide.rightAnchor, constant: -Constants.margin),
-            webView.leftAnchor.constraint(equalTo: readableGuide.leftAnchor, constant: Constants.margin)
+            webView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+            webView.widthAnchor.constraint(lessThanOrEqualToConstant: UIFontMetrics(forTextStyle: .body).scaledValue(for: Constants.preferredArticleWidth))
         ])
 
         webView.translatesAutoresizingMaskIntoConstraints = false
@@ -853,7 +856,7 @@ class ReaderDetailViewController: UIViewController, ReaderDetailView {
     }
 
     private enum Constants {
-        static let margin: CGFloat = UIDevice.isPad() ? 0 : 8
+        static let preferredArticleWidth: CGFloat = 680
     }
 
     // MARK: - Managed object observer

WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderDetailToolbar.swift

@@ -176,7 +176,7 @@ class ReaderDetailToolbar {
         // Set font
         configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
             var outgoing = incoming
-            outgoing.font = .preferredFont(forTextStyle: .subheadline)
+            outgoing.font = .system(size: 15)
             return outgoing
         }
 

WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderHeroView.swift

@@ -12,7 +12,7 @@ final class ReaderHeroView: UIView {
         traitCollection.horizontalSizeClass == .compact ? 40 : 20
     }
 
-    let bottomExtensionHeight = DesignConstants.radius(.large)
+    private(set) var bottomExtensionHeight: CGFloat = 0
 
     var imageURL: URL?
 
@@ -65,6 +65,17 @@ final class ReaderHeroView: UIView {
         }
     }
 
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        // Extend below the header of the article to support corner radius
+        let newValue = traitCollection.horizontalSizeClass == .compact ? DesignConstants.radius(.large) : 0
+        if bottomExtensionHeight != newValue {
+            bottomExtensionHeight = newValue
+            setNeedsLayout()
+        }
+    }
+
     func configureTapGesture(in scrollView: UIScrollView, _ closure: @escaping (AsyncImageView) -> Void) {
         let tap = UITapGestureRecognizer(target: self, action: #selector(didTap))
         tap.cancelsTouchesInView = false