From 6baf8a93af08ab457223f3185112bc39d6ef0ab1 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 2 Jun 2026 16:46:19 +0300
Subject: [PATCH] feat: pin commit message in mobile changes view

Restructure the changes list so the staged/changed file list scrolls inside
ChangesPanel while the commit message and actions stay pinned to the bottom,
matching the desktop git sidebar instead of letting the commit box scroll out
of view with the list.
---
 packages/ui/src/apps/MobileChangesSurface.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/apps/MobileChangesSurface.tsx b/packages/ui/src/apps/MobileChangesSurface.tsx
index 34d85f07..01fa8cba 100644
--- a/packages/ui/src/apps/MobileChangesSurface.tsx
+++ b/packages/ui/src/apps/MobileChangesSurface.tsx
@@ -500,9 +500,10 @@ export const MobileChangesSurface: React.FC<MobileChangesSurfaceProps> = ({ onCl
           hasUncommittedChanges={changeEntries.length > 0}
         />
       </header>
-      <ScrollShadow className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
-        {changeEntries.length > 0 ? (
-          <div className="flex flex-col gap-4">
+      {changeEntries.length > 0 ? (
+        <div className="flex min-h-0 flex-1 flex-col">
+          {/* File list scrolls inside ChangesPanel; the commit footer stays pinned. */}
+          <div className="min-h-0 flex-1 overflow-hidden px-4 pt-4">
             <ChangesPanel
               groups={changeGroups}
               diffStats={status?.diffStats}
@@ -512,6 +513,8 @@ export const MobileChangesSurface: React.FC<MobileChangesSurfaceProps> = ({ onCl
               headerBackgroundClassName="bg-transparent"
               onVisiblePathsChange={setVisibleChangePaths}
             />
+          </div>
+          <div className="shrink-0 border-t border-border/50 px-4 pb-4 pt-3">
             <CommitSection
               stagedCount={stagedChangeEntries.length}
               commitMessage={commitMessage}
@@ -527,10 +530,12 @@ export const MobileChangesSurface: React.FC<MobileChangesSurfaceProps> = ({ onCl
               onOpenGitmojiPicker={() => {}}
             />
           </div>
-        ) : (
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1">
           <MobileChangesState icon message={t('gitView.empty.cleanTitle')} description={t('mobile.changes.cleanDescription')} />
-        )}
-      </ScrollShadow>
+        </div>
+      )}
     </div>
   );
 };