Fix/Autocorrect On Git And Message Overlap (#401)

* hive(01-add-mobile-autocorrect-to-commit-message-input): Added mobile autocorrect to commit message input.

* hive(02-add-mobile-autocorrect-to-pr-title-inputs): Added mobile autocorrect to PR title inputs in Pul

* hive(03-add-mobile-autocorrect-to-pr-description-textareas): Added mobile autocorrect to PR description textare

* Fix chat last message overlap

packages/ui/src/components/chat/ChatMessage.tsx

@@ -887,7 +887,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             <div
                 className={cn(
                     'group w-full',
-                    shouldShowHeader ? 'pt-6' : 'pt-0',
+                    shouldShowHeader ? (isMobile ? 'pt-10' : 'pt-6') : 'pt-0',
                     isUser ? 'pb-0' : isFollowedByAssistant ? 'pb-0' : 'pb-8'
                 )}
                 data-message-id={message.info.id}

packages/ui/src/components/chat/message/MessageBody.tsx

@@ -184,7 +184,8 @@ const UserMessageBody: React.FC<{
             <MessageFilesDisplay files={parts} onShowPopup={onShowPopup} compact />
             {(canCopyMessage && hasCopyableText) || onRevert || onFork ? (
                 <div className={cn(
-                    "absolute top-full left-0 right-0 z-10 pt-5 group/user-actions"
+                    "absolute top-full left-0 right-0 z-10 group/user-actions",
+                    isMobile ? "pt-2 pb-3" : "pt-5"
                 )}>
                     <div
                         className={cn(

packages/ui/src/components/views/git/CommitInput.tsx

@@ -7,6 +7,7 @@ interface CommitInputProps {
   onChange: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
+  hasTouchInput?: boolean;
 }
 
 const MIN_HEIGHT = 38; // Single line height
@@ -17,6 +18,7 @@ export const CommitInput: React.FC<CommitInputProps> = ({
   onChange,
   placeholder = 'Commit message',
   disabled = false,
+  hasTouchInput = false,
 }) => {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
@@ -39,6 +41,9 @@ export const CommitInput: React.FC<CommitInputProps> = ({
       placeholder={placeholder}
       rows={1}
       disabled={disabled}
+      autoCorrect={hasTouchInput ? 'on' : 'off'}
+      autoCapitalize={hasTouchInput ? 'sentences' : 'off'}
+      spellCheck={hasTouchInput ? true : false}
       className={cn(
         'rounded-lg bg-background/80 resize-none overflow-y-auto',
         disabled && 'opacity-50'

packages/ui/src/components/views/git/CommitSection.tsx

@@ -65,7 +65,7 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
 }) => {
   const hasSelectedFiles = selectedCount > 0;
   const canCommit = commitMessage.trim() && hasSelectedFiles && commitAction === null;
-  const { isMobile } = useDeviceInfo();
+  const { isMobile, hasTouchInput } = useDeviceInfo();
   const hasMultipleRemotes = remotes.length > 1;
 
   const containerClassName =
@@ -115,6 +115,7 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
             onChange={onCommitMessageChange}
             placeholder="Commit message"
             disabled={commitAction !== null}
+            hasTouchInput={hasTouchInput}
           />
 
           {gitmojiEnabled && (

packages/ui/src/components/views/git/PullRequestSection.tsx

@@ -185,7 +185,7 @@ export const PullRequestSection: React.FC<{
   const setSidebarSection = useUIStore((state) => state.setSidebarSection);
   const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const currentSessionId = useSessionStore((state) => state.currentSessionId);
-  const { isMobile } = useDeviceInfo();
+  const { isMobile, hasTouchInput } = useDeviceInfo();
 
   const openGitHubSettings = React.useCallback(() => {
     setSidebarSection('settings');
@@ -1244,12 +1244,18 @@ export const PullRequestSection: React.FC<{
                           value={editTitle}
                           onChange={(e) => setEditTitle(e.target.value)}
                           placeholder="PR title"
+                          autoCorrect={hasTouchInput ? "on" : "off"}
+                          autoCapitalize={hasTouchInput ? "sentences" : "off"}
+                          spellCheck={hasTouchInput}
                         />
                         <Textarea
                           value={editBody}
                           onChange={(e) => setEditBody(e.target.value)}
                           className="min-h-[120px] bg-background/80"
                           placeholder="Describe this PR"
+                          autoCorrect={hasTouchInput ? "on" : "off"}
+                          autoCapitalize={hasTouchInput ? "sentences" : "off"}
+                          spellCheck={hasTouchInput}
                         />
                       </div>
                     ) : (
@@ -1480,6 +1486,9 @@ export const PullRequestSection: React.FC<{
                     value={title}
                     onChange={(e) => setTitle(e.target.value)}
                     placeholder="PR title"
+                    autoCorrect={hasTouchInput ? "on" : "off"}
+                    autoCapitalize={hasTouchInput ? "sentences" : "off"}
+                    spellCheck={hasTouchInput}
                   />
                 </label>
 
@@ -1490,6 +1499,9 @@ export const PullRequestSection: React.FC<{
                     onChange={(e) => setBody(e.target.value)}
                     className="min-h-[110px] bg-background/80"
                     placeholder="What changed and why"
+                    autoCorrect={hasTouchInput ? "on" : "off"}
+                    autoCapitalize={hasTouchInput ? "sentences" : "off"}
+                    spellCheck={hasTouchInput}
                   />
                 </label>