fix: Prevent accidental IME submission and add bottom padding for Kanban cards

[nogataka]

PR Description

Summary

This PR fixes two UI issues:

1. IME Composition Bug: When using Japanese (or other language) IME input, pressing Enter to confirm character conversion would accidentally submit the message instead of just confirming the IME selection.

2. Content Clipping: Kanban cards at the bottom of the viewport were being cut off when the debug panel was closed.

Problem

IME Issue

Users typing in Japanese (or Chinese, Korean, etc.) use an Input Method Editor (IME) that requires pressing Enter to confirm character selection. Without checking isComposing, the Enter keypress would both confirm the IME selection AND submit the form, causing incomplete or garbled messages to be sent.

Padding Issue

When the debug panel is closed, paddingBottom was set to undefined, which caused the main content area to extend to the very bottom of the viewport. This resulted in Kanban cards being partially hidden behind the browser chrome or cut off.

before

After

Solution

IME Fix

Added !e.nativeEvent.isComposing check to all handleKeyDown functions that submit on Enter:

// Before
if (e.key === 'Enter' && !e.shiftKey) {

// After
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {

Padding Fix

Set a minimum bottom padding of 48px when the debug panel is closed:

// Before
style={{ paddingBottom: debugOpen ? debugPanelHeight + 32 : undefined }}

// After
style={{ paddingBottom: debugOpen ? debugPanelHeight + 32 : 48 }}

Files Changed

File	Change
ui/src/components/AssistantChat.tsx	Added isComposing check
ui/src/components/ExpandProjectChat.tsx	Added isComposing check
ui/src/components/SpecCreationChat.tsx	Added isComposing check
ui/src/components/FolderBrowser.tsx	Added isComposing check
ui/src/components/TerminalTabs.tsx	Added isComposing check
ui/src/App.tsx	Added minimum bottom padding

Testing

1. IME Test:

   • Enable Japanese IME (or any other IME)
   • Type a message in any chat component
   • Press Enter to confirm IME character selection
   • Verify the message is NOT submitted until you press Enter again after IME is closed

2. Padding Test:

   • Close the debug panel (press D)
   • Scroll to the bottom of the Kanban board
   • Verify cards are fully visible and not cut off

Browser Compatibility

KeyboardEvent.isComposing is supported in all modern browsers:

• Chrome 56+
• Firefox 52+
• Safari 10.1+
• Edge 79+

Summary by CodeRabbit

Bug Fixes

• Fixed layout spacing when debug panel is closed to ensure consistent bottom padding
• Improved keyboard input handling across chat and editor components to prevent accidental submissions while composing multi-byte characters with input methods

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request fixes layout spacing inconsistencies and prevents accidental form submissions during IME (Input Method Editor) composition. A padding default is added to the main container, and Enter key handlers across multiple chat and input components are updated to check composition state before triggering actions.

Changes

Cohort / File(s)	Summary
Layout Fix ui/src/App.tsx	Sets padding-bottom to 48 by default when debug panel is closed, ensuring consistent bottom spacing regardless of debug panel visibility.
IME Composition Guards ui/src/components/AssistantChat.tsx, ExpandProjectChat.tsx, SpecCreationChat.tsx, TerminalTabs.tsx	Adds e.nativeEvent.isComposing check to Enter key handlers to prevent sending messages when IME input is in progress.
IME Composition Guard (Folder Creation) ui/src/components/FolderBrowser.tsx	Adds e.nativeEvent.isComposing check to Enter key handler to prevent accidental folder creation during non-Latin IME input.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A hop and a fix, no more accidental sends,
When typing in Japanese, the chaos ends,
With composition guards and spacing so neat,
The UI now flows with a rabbit-approved beat! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes both main changes: IME submission prevention and bottom padding fix for Kanban cards, matching the PR's dual objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}