Fix broken sidebar and content divider lines for a continuous layout.

Use a dedicated sidebar separator, full-width header dividers, and aligned Reddit chrome so horizontal rules meet the vertical border without gaps.

Co-authored-by: Cursor <cursoragent@cursor.com>

Reddit App/Utilities/RedditHomeChromeStyle.swift

@@ -1,11 +1,31 @@
 import Foundation
 
 enum RedditHomeChromeStyle {
-    /// Reserved for optional Reddit chrome tweaks. Login and user-menu controls are left visible.
+    /// Keeps Reddit header separators flush with the in-app sidebar divider.
     static let injectionScript = """
     (function() {
       const STYLE_ID = 'reddora-home-chrome-style';
       if (document.getElementById(STYLE_ID)) return;
+
+      const style = document.createElement('style');
+      style.id = STYLE_ID;
+      style.textContent = `
+        header,
+        header > * {
+          margin-left: 0 !important;
+        }
+
+        header faceplate-border,
+        header [role="separator"],
+        header hr {
+          width: 100% !important;
+          max-width: none !important;
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
+      `;
+
+      (document.head || document.documentElement).appendChild(style);
     })();
     """
 }

Reddit App/Views/CommentWriterView.swift

@@ -58,38 +58,37 @@ struct CommentWriterView: View {
     // MARK: - Header
 
     private var header: some View {
-        HStack(spacing: 14) {
-            ModernSidebarIconView(kind: .commentWriter, size: 40)
-
-            VStack(alignment: .leading, spacing: 2) {
-                HStack(spacing: 6) {
-                    Text("Comment Writer")
-                        .font(.system(size: 18, weight: .semibold))
-                        .foregroundStyle(AppTheme.textPrimary)
-
-                    if viewModel.hasDraftChanges {
-                        Circle()
-                            .fill(AppTheme.accentGreen)
-                            .frame(width: 6, height: 6)
-                            .help("Draft has unsaved edits")
+        VStack(spacing: 0) {
+            HStack(spacing: 14) {
+                ModernSidebarIconView(kind: .commentWriter, size: 40)
+
+                VStack(alignment: .leading, spacing: 2) {
+                    HStack(spacing: 6) {
+                        Text("Comment Writer")
+                            .font(.system(size: 18, weight: .semibold))
+                            .foregroundStyle(AppTheme.textPrimary)
+
+                        if viewModel.hasDraftChanges {
+                            Circle()
+                                .fill(AppTheme.accentGreen)
+                                .frame(width: 6, height: 6)
+                                .help("Draft has unsaved edits")
+                        }
                     }
+
+                    Text(viewModel.usesLiveAI ? "Write Reddit-ready comments with AI" : "Write Reddit-ready comments with AI templates")
+                        .font(.system(size: 11))
+                        .foregroundStyle(AppTheme.textSecondary)
                 }
 
-                Text(viewModel.usesLiveAI ? "Write Reddit-ready comments with AI" : "Write Reddit-ready comments with AI templates")
-                    .font(.system(size: 11))
-                    .foregroundStyle(AppTheme.textSecondary)
-            }
+                Spacer()
 
-            Spacer()
+                headerActions
+            }
+            .padding(.horizontal, Layout.horizontalPadding)
+            .padding(.vertical, 16)
 
-            headerActions
-        }
-        .padding(.horizontal, Layout.horizontalPadding)
-        .padding(.vertical, 16)
-        .overlay(alignment: .bottom) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(height: 1)
+            FullWidthDivider()
         }
     }
 

Reddit App/Views/Components/FullWidthDivider.swift

@@ -0,0 +1,9 @@
+import SwiftUI
+
+struct FullWidthDivider: View {
+    var body: some View {
+        Rectangle()
+            .fill(AppTheme.border)
+            .frame(height: 1)
+    }
+}

Reddit App/Views/Components/RedditWebBackBar.swift

@@ -5,29 +5,28 @@ struct RedditWebBackBar: View {
     let onBack: () -> Void
 
     var body: some View {
-        HStack(spacing: 0) {
-            Button(action: onBack) {
-                HStack(spacing: 5) {
-                    Image(systemName: "chevron.left")
-                        .font(.system(size: 12, weight: .semibold))
-                    Text("Back")
-                        .font(.system(size: 13, weight: .medium))
+        VStack(spacing: 0) {
+            HStack(spacing: 0) {
+                Button(action: onBack) {
+                    HStack(spacing: 5) {
+                        Image(systemName: "chevron.left")
+                            .font(.system(size: 12, weight: .semibold))
+                        Text("Back")
+                            .font(.system(size: 13, weight: .medium))
+                    }
                 }
+                .buttonStyle(AppSecondaryButtonStyle())
+                .disabled(!canGoBack)
+                .opacity(canGoBack ? 1 : 0.4)
+                .padding(.leading, 12)
+                .padding(.vertical, 8)
+
+                Spacer(minLength: 0)
             }
-            .buttonStyle(AppSecondaryButtonStyle())
-            .disabled(!canGoBack)
-            .opacity(canGoBack ? 1 : 0.4)
-            .padding(.leading, 12)
-            .padding(.vertical, 8)
+            .frame(maxWidth: .infinity)
+            .background(AppTheme.panelBackground)
 
-            Spacer(minLength: 0)
-        }
-        .frame(maxWidth: .infinity)
-        .background(AppTheme.panelBackground)
-        .overlay(alignment: .bottom) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(height: 1)
+            FullWidthDivider()
         }
     }
 }

Reddit App/Views/FrontPageView.swift

@@ -21,6 +21,10 @@ struct FrontPageView: View {
                     isPremium: subscriptions.hasPremiumAccess
                 )
 
+                Rectangle()
+                    .fill(AppTheme.border)
+                    .frame(width: 1)
+
                 mainContent
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
                     .environment(\.requirePremiumAccess, {
@@ -127,7 +131,7 @@ struct FrontPageView: View {
                 }
             }
         }
-        .background(AppTheme.background)
+        .background(viewModel.isRedditActive ? AppTheme.sidebarBackground : AppTheme.background)
     }
 
     @ViewBuilder

Reddit App/Views/PostGeneratorView.swift

@@ -75,38 +75,37 @@ struct PostGeneratorView: View {
     // MARK: - Header
 
     private var header: some View {
-        HStack(spacing: 14) {
-            ModernSidebarIconView(kind: .postGenerator, size: 40)
-
-            VStack(alignment: .leading, spacing: 2) {
-                HStack(spacing: 6) {
-                    Text("Post Generator")
-                        .font(.system(size: 18, weight: .semibold))
-                        .foregroundStyle(AppTheme.textPrimary)
-
-                    if viewModel.hasDraftChanges {
-                        Circle()
-                            .fill(AppTheme.accentOrange)
-                            .frame(width: 6, height: 6)
-                            .help("Draft has unsaved edits")
+        VStack(spacing: 0) {
+            HStack(spacing: 14) {
+                ModernSidebarIconView(kind: .postGenerator, size: 40)
+
+                VStack(alignment: .leading, spacing: 2) {
+                    HStack(spacing: 6) {
+                        Text("Post Generator")
+                            .font(.system(size: 18, weight: .semibold))
+                            .foregroundStyle(AppTheme.textPrimary)
+
+                        if viewModel.hasDraftChanges {
+                            Circle()
+                                .fill(AppTheme.accentOrange)
+                                .frame(width: 6, height: 6)
+                                .help("Draft has unsaved edits")
+                        }
                     }
+
+                    Text(viewModel.usesLiveAI ? "Create Reddit-ready posts with AI" : "Create Reddit-ready posts with AI templates")
+                        .font(.system(size: 11))
+                        .foregroundStyle(AppTheme.textSecondary)
                 }
 
-                Text(viewModel.usesLiveAI ? "Create Reddit-ready posts with AI" : "Create Reddit-ready posts with AI templates")
-                    .font(.system(size: 11))
-                    .foregroundStyle(AppTheme.textSecondary)
-            }
+                Spacer()
 
-            Spacer()
+                headerActions
+            }
+            .padding(.horizontal, Layout.horizontalPadding)
+            .padding(.vertical, 16)
 
-            headerActions
-        }
-        .padding(.horizontal, Layout.horizontalPadding)
-        .padding(.vertical, 16)
-        .overlay(alignment: .bottom) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(height: 1)
+            FullWidthDivider()
         }
     }
 

Reddit App/Views/SettingsView.swift

@@ -28,26 +28,25 @@ struct SettingsView: View {
     }
 
     private var header: some View {
-        HStack(spacing: 14) {
-            ModernSidebarIconView(kind: .settings, size: 40)
+        VStack(spacing: 0) {
+            HStack(spacing: 14) {
+                ModernSidebarIconView(kind: .settings, size: 40)
+
+                VStack(alignment: .leading, spacing: 2) {
+                    Text("Settings")
+                        .font(.system(size: 18, weight: .semibold))
+                        .foregroundStyle(AppTheme.textPrimary)
+                    Text("Manage app preferences")
+                        .font(.system(size: 11))
+                        .foregroundStyle(AppTheme.textSecondary)
+                }
 
-            VStack(alignment: .leading, spacing: 2) {
-                Text("Settings")
-                    .font(.system(size: 18, weight: .semibold))
-                    .foregroundStyle(AppTheme.textPrimary)
-                Text("Manage app preferences")
-                    .font(.system(size: 11))
-                    .foregroundStyle(AppTheme.textSecondary)
+                Spacer()
             }
+            .padding(.horizontal, 24)
+            .padding(.vertical, 16)
 
-            Spacer()
-        }
-        .padding(.horizontal, 24)
-        .padding(.vertical, 16)
-        .overlay(alignment: .bottom) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(height: 1)
+            FullWidthDivider()
         }
     }
 

Reddit App/Views/SidebarView.swift

@@ -13,11 +13,6 @@ struct SidebarView: View {
         }
         .frame(width: AppTheme.sidebarWidth)
         .background(AppTheme.sidebarBackground)
-        .overlay(alignment: .trailing) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(width: 1)
-        }
     }
 
     private var header: some View {
@@ -99,58 +94,59 @@ struct SidebarView: View {
     }
 
     private var upgradeCard: some View {
-        VStack(alignment: .center, spacing: 8) {
-            VStack(spacing: 4) {
-                Image(systemName: "crown.fill")
-                    .font(.system(size: 14))
-                    .foregroundStyle(AppTheme.accentYellow)
-                Text(isPremium ? "Reddora Premium" : "Upgrade to Premium")
-                    .font(.system(size: 12, weight: .semibold))
-                    .foregroundStyle(AppTheme.textPrimary)
-            }
-            .frame(maxWidth: .infinity, alignment: .center)
+        VStack(spacing: 0) {
+            Rectangle()
+                .fill(AppTheme.border)
+                .frame(height: 1)
 
-            Text(
-                isPremium
-                    ? "You have unlimited AI generations and all premium features."
-                    : "Unlock unlimited AI generations and advanced analytics"
-            )
-                .font(.system(size: 10))
-                .foregroundStyle(AppTheme.textSecondary)
-                .multilineTextAlignment(.center)
+            VStack(alignment: .center, spacing: 8) {
+                VStack(spacing: 4) {
+                    Image(systemName: "crown.fill")
+                        .font(.system(size: 14))
+                        .foregroundStyle(AppTheme.accentYellow)
+                    Text(isPremium ? "Reddora Premium" : "Upgrade to Premium")
+                        .font(.system(size: 12, weight: .semibold))
+                        .foregroundStyle(AppTheme.textPrimary)
+                }
                 .frame(maxWidth: .infinity, alignment: .center)
-                .fixedSize(horizontal: false, vertical: true)
-                .lineSpacing(2)
 
-            Button(isPremium ? "Manage Subscription" : "Upgrade Now") {
-                viewModel.showPaywall()
-            }
-                .font(.system(size: 11, weight: .semibold))
-                .foregroundStyle(.white)
-                .frame(maxWidth: .infinity)
-                .padding(.vertical, 7.5)
-                .background(AppTheme.accentPurple)
-                .clipShape(RoundedRectangle(cornerRadius: 8))
-                .buttonStyle(AppPrimaryButtonStyle())
-        }
-        .frame(maxWidth: .infinity, minHeight: 105)
-        .padding(.horizontal, 12)
-        .padding(.vertical, 12)
-        .background(
-            RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
-                .fill(AppTheme.cardBackground)
-                .overlay(
-                    RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
-                        .stroke(AppTheme.accentPurple.opacity(0.25), lineWidth: 1)
+                Text(
+                    isPremium
+                        ? "You have unlimited AI generations and all premium features."
+                        : "Unlock unlimited AI generations and advanced analytics"
                 )
-        )
-        .padding(.horizontal, AppTheme.sidebarContentInset + 8)
-        .padding(.top, 12)
-        .padding(.bottom, 20)
-        .overlay(alignment: .top) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(height: 1)
+                    .font(.system(size: 10))
+                    .foregroundStyle(AppTheme.textSecondary)
+                    .multilineTextAlignment(.center)
+                    .frame(maxWidth: .infinity, alignment: .center)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .lineSpacing(2)
+
+                Button(isPremium ? "Manage Subscription" : "Upgrade Now") {
+                    viewModel.showPaywall()
+                }
+                    .font(.system(size: 11, weight: .semibold))
+                    .foregroundStyle(.white)
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical, 7.5)
+                    .background(AppTheme.accentPurple)
+                    .clipShape(RoundedRectangle(cornerRadius: 8))
+                    .buttonStyle(AppPrimaryButtonStyle())
+            }
+            .frame(maxWidth: .infinity, minHeight: 105)
+            .padding(.horizontal, 12)
+            .padding(.vertical, 12)
+            .background(
+                RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
+                    .fill(AppTheme.cardBackground)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
+                            .stroke(AppTheme.accentPurple.opacity(0.25), lineWidth: 1)
+                    )
+            )
+            .padding(.horizontal, AppTheme.sidebarContentInset + 8)
+            .padding(.top, 12)
+            .padding(.bottom, 20)
         }
     }
 }

Reddit App/Views/TitleOptimizerView.swift

@@ -50,28 +50,27 @@ struct TitleOptimizerView: View {
     // MARK: - Header
 
     private var header: some View {
-        HStack(spacing: 14) {
-            ModernSidebarIconView(kind: .titleOptimizer, size: 40)
-
-            VStack(alignment: .leading, spacing: 2) {
-                Text("Title Optimizer")
-                    .font(.system(size: 18, weight: .semibold))
-                    .foregroundStyle(AppTheme.textPrimary)
-                Text(viewModel.usesLiveAI ? "Craft viral Reddit titles with AI" : "Craft viral Reddit titles with AI templates")
-                    .font(.system(size: 11))
-                    .foregroundStyle(AppTheme.textSecondary)
-            }
+        VStack(spacing: 0) {
+            HStack(spacing: 14) {
+                ModernSidebarIconView(kind: .titleOptimizer, size: 40)
+
+                VStack(alignment: .leading, spacing: 2) {
+                    Text("Title Optimizer")
+                        .font(.system(size: 18, weight: .semibold))
+                        .foregroundStyle(AppTheme.textPrimary)
+                    Text(viewModel.usesLiveAI ? "Craft viral Reddit titles with AI" : "Craft viral Reddit titles with AI templates")
+                        .font(.system(size: 11))
+                        .foregroundStyle(AppTheme.textSecondary)
+                }
 
-            Spacer()
+                Spacer()
 
-            headerActions
-        }
-        .padding(.horizontal, Layout.horizontalPadding)
-        .padding(.vertical, 16)
-        .overlay(alignment: .bottom) {
-            Rectangle()
-                .fill(AppTheme.border)
-                .frame(height: 1)
+                headerActions
+            }
+            .padding(.horizontal, Layout.horizontalPadding)
+            .padding(.vertical, 16)
+
+            FullWidthDivider()
         }
     }