fix: chat-input height fixed

[zhangmo8]

close #1256

fix the problem of flex layout being stretched by sub-content

Summary by CodeRabbit

• Style
  • Updated chat input container sizing behavior with more constrained height limits
  • Reduced maximum resizable height from 80% to 50% of viewport
  • Simplified editor scroll behavior and layout constraints

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

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR fixes a bug where the chat input content area didn't resize responsively after adjusting window height. Maximum resize constraint tightened from 80% to 50%, style binding logic refined for variant-specific height handling, and editor container initialization simplified.

Changes

Cohort / File(s)	Summary
Chat Input Height & Resizing Fixes src/renderer/src/components/chat-input/ChatInput.vue	Style binding refactored to apply fixed/max height based on variant and inputHeight state; maximum resize height capped at 50vh (previously 80%); editor container classes simplified by removing overflow-y-auto and height-full constraints, retaining only min-h-12.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: resize chat input #1126: Modifies chat input resizing behavior and height constraints in ChatInput.vue, directly addressing inputHeight styling and max-height bounds.
• fix: fix input style #1231: Updates ChatInput.vue editor container height-related classes and behavior for full-height rendering, overlapping with this PR's height handling changes.
• feat: make typing smoother, inspired by yetone’s Alma. #1194: Modifies chat editor container markup and styling with class name adjustments, related at the structural level.

Suggested reviewers

• deepinfect

Poem

🐰 Whiskers twitch with delight—
Input heights now resize just right!
Fifty percent's the new constraint,
No more glitches, no more complaint!
Hop hop, the bug's gone with the height! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: chat-input height fixed' accurately describes the main change, which is fixing chat input height behavior to properly respond to window adjustments.
Linked Issues check	✅ Passed	The PR addresses issue #1256 by modifying style bindings and resize constraints to ensure the chat input content area properly follows window height adjustments, directly fulfilling the linked issue's requirement.
Out of Scope Changes check	✅ Passed	All changes in ChatInput.vue are scoped to fixing chat input height behavior and are directly related to resolving the linked issue with no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

---

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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/renderer/src/components/chat-input/ChatInput.vue (1)

585-585: Clean architectural improvement for overflow handling.

The editor class simplification correctly moves overflow and height management to the parent container (line 66), which already has flex-1 min-h-0 overflow-y-auto. This provides cleaner separation of concerns while maintaining the same scrolling behavior.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4c0e28a and 49dcde0.

📒 Files selected for processing (1)

• src/renderer/src/components/chat-input/ChatInput.vue

🧰 Additional context used

📓 Path-based instructions (9)

src/renderer/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/**/*.vue: Use Vue 3 Composition API for all components
Use Tailwind CSS for styling with scoped styles
All user-facing strings must use i18n keys via vue-i18n

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

src/renderer/src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use usePresenter.ts composable for renderer-to-main IPC communication via direct presenter method calls

Ensure all code comments are in English and all log messages are in English, with no non-English text in code comments or console statements

Use VueUse composables for common utilities like useLocalStorage, useClipboard, useDebounceFn

Vue 3 renderer app code should be organized in src/renderer/src with subdirectories for components/, stores/, views/, i18n/, and lib/

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

**/*.{js,ts,tsx,jsx,vue,mjs,cjs}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

All logs and comments must be in English

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

**/*.{js,ts,tsx,jsx,vue,json,mjs,cjs}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

Use Prettier as the code formatter

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

src/renderer/src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*.{vue,ts,tsx}: Use vue-i18n framework for internationalization located at src/renderer/src/i18n/
All user-facing strings must use i18n keys, not hardcoded text

src/renderer/src/**/*.{vue,ts,tsx}: Use ref for primitives and references, reactive for objects in Vue 3 Composition API
Prefer computed properties over methods for derived state in Vue components
Import Shadcn Vue components from @/shadcn/components/ui/ path alias
Use the cn() utility function combining clsx and tailwind-merge for dynamic Tailwind classes
Use defineAsyncComponent() for lazy loading heavy Vue components
Use TypeScript for all Vue components and composables with explicit type annotations
Define TypeScript interfaces for Vue component props and data structures
Use usePresenter composable for main process communication instead of direct IPC calls

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

src/renderer/src/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

Import useI18n from vue-i18n in Vue components to access translation functions t and locale

src/renderer/src/**/*.vue: Use <script setup> syntax for concise Vue 3 component definitions with Composition API
Define props and emits explicitly in Vue components using defineProps and defineEmits with TypeScript interfaces
Use provide/inject for dependency injection in Vue components instead of prop drilling
Use Tailwind CSS for all styling instead of writing scoped CSS files
Use mobile-first responsive design approach with Tailwind breakpoints
Use Iconify Vue with lucide icons as primary choice, following pattern lucide:{icon-name}
Use v-memo directive for memoizing expensive computations in templates
Use v-once directive for rendering static content without reactivity updates
Use virtual scrolling with RecycleScroller component for rendering long lists
Subscribe to events using rendererEvents.on() and unsubscribe in onUnmounted lifecycle hook

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

src/renderer/src/components/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/vue-stack-guide.mdc)

Name Vue components using PascalCase (e.g., ChatInput.vue, MessageItemUser.vue)

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

Vue components must be named in PascalCase (e.g., ChatInput.vue) and use Vue 3 Composition API with Pinia for state management and Tailwind for styling

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Use camelCase for variable and function names; use PascalCase for types and classes; use SCREAMING_SNAKE_CASE for constants
Configure Prettier with single quotes, no semicolons, and line width of 100 characters. Run pnpm run format after completing features

Files:

• src/renderer/src/components/chat-input/ChatInput.vue

🧠 Learnings (3)

📚 Learning: 2026-01-05T02:41:31.619Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.619Z
Learning: Applies to src/renderer/src/components/**/*.vue : Name Vue components using PascalCase (e.g., `ChatInput.vue`, `MessageItemUser.vue`)

Applied to files:

• src/renderer/src/components/chat-input/ChatInput.vue

📚 Learning: 2026-01-05T02:41:31.619Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.619Z
Learning: Applies to src/renderer/src/components/ : Organize Vue component directories using lowercase with dashes (e.g., `chat-input/`, `message/`)

Applied to files:

• src/renderer/src/components/chat-input/ChatInput.vue

📚 Learning: 2026-01-05T02:41:45.204Z

Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-05T02:41:45.204Z
Learning: Applies to **/*.vue : Vue components must be named in PascalCase (e.g., `ChatInput.vue`) and use Vue 3 Composition API with Pinia for state management and Tailwind for styling

Applied to files:

• src/renderer/src/components/chat-input/ChatInput.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-check (x64)

🔇 Additional comments (2)

src/renderer/src/components/chat-input/ChatInput.vue (2)

14-20: Height constraint logic correctly addresses the reported bug.

The style binding now properly handles the resizing behavior:

• When inputHeight is set (user has manually resized), it applies a fixed height
• When not manually resized, it constrains to maxHeight: 50vh to prevent the flex container from being stretched by sub-content

This directly fixes issue #1256 where the input content area didn't follow the adjusted window height.

---

530-531: Verify the 50% maximum height constraint is appropriate.

The maximum allowed resize height has been reduced to 50% of the window height, which aligns with the maxHeight: 50vh default in the style binding. While this provides consistency, it's a significant reduction from the previous constraint and limits how much users can expand the input area.

Please confirm this 50% limit is intentional and appropriate for typical use cases, especially for users who may need to compose longer, more complex prompts.