Fix offline banner issues

Author: itsmeichigo

WooCommerce/Classes/Bookings/BookingsTabView.swift

@@ -36,16 +36,15 @@ private extension BookingsTabViewHostingController {
 struct BookingsTabView: View {
     @State private var visibility: NavigationSplitViewVisibility = .all
     @StateObject private var connectivityMonitor = ConnectivityMonitor()
-
-    private let siteID: Int64
+    @StateObject private var containerViewModel: BookingListContainerViewModel
 
     init(siteID: Int64) {
-        self.siteID = siteID
+        _containerViewModel = StateObject(wrappedValue: BookingListContainerViewModel(siteID: siteID))
     }
 
     var body: some View {
         NavigationSplitView(columnVisibility: $visibility) {
-            BookingListContainerView(viewModel: BookingListContainerViewModel(siteID: siteID))
+            BookingListContainerView(viewModel: containerViewModel)
         } detail: {
             Text("Booking Detail Screen")
         }
@@ -54,7 +53,6 @@ struct BookingsTabView: View {
             if connectivityMonitor.isOffline {
                 OfflineBannerViewRepresentable()
                     .frame(height: OfflineBannerView.height)
-                    .transition(.move(edge: .bottom).combined(with: .opacity))
             }
         }
     }

WooCommerce/Classes/ViewRelated/ReusableViews/OfflineBannerView.swift

@@ -36,15 +36,17 @@ final class OfflineBannerView: UIView {
         messageLabel.text = NSLocalizedString("Offline - using cached data", comment: "Message for offline banner")
         messageLabel.applyCalloutStyle()
         messageLabel.textColor = .white
+        messageLabel.adjustsFontForContentSizeCategory = false
+        messageLabel.adjustsFontSizeToFitWidth = true
         messageLabel.translatesAutoresizingMaskIntoConstraints = false
 
         stackView.addArrangedSubview(imageView)
         stackView.addArrangedSubview(messageLabel)
 
         addSubview(stackView)
         NSLayoutConstraint.activate([
-            stackView.safeLeadingAnchor.constraint(greaterThanOrEqualTo: safeLeadingAnchor, constant: 0),
-            stackView.safeBottomAnchor.constraint(greaterThanOrEqualTo: safeBottomAnchor, constant: 0),
+            stackView.safeLeadingAnchor.constraint(greaterThanOrEqualTo: safeLeadingAnchor, constant: 8),
+            stackView.safeBottomAnchor.constraint(greaterThanOrEqualTo: safeBottomAnchor, constant: 8),
             stackView.centerXAnchor.constraint(equalTo: centerXAnchor),
             stackView.centerYAnchor.constraint(equalTo: centerYAnchor)
         ])