Fit the Language Translator page within the window without page scrolling.

Replace the outer ScrollView and fixed panel heights with a flexible layout so source and target editors share the available space.

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

gramora/Views/LanguageTranslatorView.swift

@@ -8,21 +8,19 @@ struct LanguageTranslatorView: View {
             let dynamicHorizontalPadding = min(max(proxy.size.width * 0.045, AppTheme.contentPadding), 52)
             let dynamicTopPadding = min(max(proxy.size.height * 0.05, 24), 44)
             let dynamicBottomPadding = min(max(proxy.size.height * 0.06, 28), 56)
-            let dynamicPanelHeight = min(max(proxy.size.height * 0.22, 180), 280)
 
-            ScrollView(.vertical, showsIndicators: false) {
-                VStack(alignment: .leading, spacing: 0) {
-                    header
-                        .padding(.bottom, 28)
+            VStack(alignment: .leading, spacing: 0) {
+                header
+                    .padding(.bottom, 28)
 
-                    contentCard(panelHeight: dynamicPanelHeight)
-                }
-                .frame(maxWidth: 1200, alignment: .topLeading)
-                .frame(maxWidth: .infinity, alignment: .topLeading)
-                .padding(.horizontal, dynamicHorizontalPadding)
-                .padding(.top, dynamicTopPadding)
-                .padding(.bottom, dynamicBottomPadding)
+                contentCard
+                    .frame(maxWidth: 1200, maxHeight: .infinity, alignment: .topLeading)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
             }
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+            .padding(.horizontal, dynamicHorizontalPadding)
+            .padding(.top, dynamicTopPadding)
+            .padding(.bottom, dynamicBottomPadding)
         }
         .onChange(of: viewModel.sourceText) { newValue in
             if newValue.count > LanguageTranslatorViewModel.maxCharacters {
@@ -67,7 +65,7 @@ struct LanguageTranslatorView: View {
         }
     }
 
-    private func contentCard(panelHeight: CGFloat) -> some View {
+    private var contentCard: some View {
         VStack(alignment: .leading, spacing: 16) {
             Image("YourContentLogo")
                 .resizable()
@@ -77,14 +75,18 @@ struct LanguageTranslatorView: View {
                 .clipped()
                 .accessibilityLabel("Your Content")
 
-            sourcePanel(height: panelHeight)
+            sourcePanel
+                .frame(maxHeight: .infinity)
 
-            targetPanel(height: panelHeight)
+            targetPanel
+                .frame(maxHeight: .infinity)
 
             Text("Press ⌘ + Return to translate")
                 .font(.system(size: 11))
                 .foregroundStyle(AppTheme.textMuted)
+                .fixedSize(horizontal: false, vertical: true)
         }
+        .frame(maxHeight: .infinity, alignment: .top)
         .padding(22)
         .background(AppTheme.cardBackground)
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
@@ -95,7 +97,7 @@ struct LanguageTranslatorView: View {
         .shadow(color: AppTheme.cardShadow, radius: 16, y: 6)
     }
 
-    private func sourcePanel(height: CGFloat) -> some View {
+    private var sourcePanel: some View {
         VStack(alignment: .leading, spacing: 12) {
             HStack(spacing: 8) {
                 LanguagePicker(
@@ -129,7 +131,8 @@ struct LanguageTranslatorView: View {
                 ThinCaretTextEditor(text: $viewModel.sourceText, onSubmit: viewModel.translate)
                     .font(.system(size: 14))
                     .foregroundStyle(AppTheme.textPrimary)
-                    .frame(minHeight: height, idealHeight: height)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    .frame(minHeight: 96)
                     .background(Color.white)
                     .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                     .overlay(
@@ -153,7 +156,9 @@ struct LanguageTranslatorView: View {
                     .padding(.trailing, 16)
                     .padding(.bottom, 12)
             }
+            .frame(maxHeight: .infinity)
         }
+        .frame(maxHeight: .infinity)
         .padding(16)
         .background(AppTheme.background)
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
@@ -164,7 +169,7 @@ struct LanguageTranslatorView: View {
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
     }
 
-    private func targetPanel(height: CGFloat) -> some View {
+    private var targetPanel: some View {
         VStack(alignment: .leading, spacing: 12) {
             LanguagePicker(
                 title: "To",
@@ -179,7 +184,8 @@ struct LanguageTranslatorView: View {
                 )
                 .font(.system(size: 14))
                 .foregroundStyle(AppTheme.textPrimary)
-                .frame(minHeight: height, idealHeight: height)
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .frame(minHeight: 96)
                 .background(Color.white)
                 .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))
                 .overlay(
@@ -196,7 +202,9 @@ struct LanguageTranslatorView: View {
                         .allowsHitTesting(false)
                 }
             }
+            .frame(maxHeight: .infinity)
         }
+        .frame(maxHeight: .infinity)
         .padding(16)
         .background(AppTheme.background)
         .clipShape(RoundedRectangle(cornerRadius: AppTheme.inputCornerRadius))