Fix AI search dialog hint text overlap with send button

[devin-ai-integration]

Fix AI search dialog hint text overlap with send button

Summary

Fixed the UI overlap issue where the "Press Enter to send" hint text was hidden by long prompts in the AI search dialog. Changed the hint text positioning from right-2 to right-12 to provide adequate clearance for the send button (40px width + 8px gap).

Review & Testing Checklist for Human

• Test AI search dialog with various prompt lengths - Verify hint text remains visible and properly positioned when typing short, medium, and very long prompts that cause textarea to expand
• Test responsive behavior - Check the positioning on different screen sizes (mobile, tablet, desktop) to ensure adequate spacing is maintained
• Verify visual spacing - Confirm the hint text positioning looks professional and has appropriate spacing from the send button

Notes

• This is a minimal CSS positioning fix (one class value change: right-2 → right-12)
• Tested locally with long prompts and confirmed hint text remains visible without overlapping send button
• Link to Devin run: https://app.devin.ai/sessions/979f0a21b7f543a4a3b4233f41970c94
• Requested by: @pec1985

Summary by CodeRabbit

• Style
  • Search input area now has a slightly taller, more flexible height for improved spacing.
  • Hint text repositioned to a right-aligned, non-overlapping location for clearer readability.
  • Send button vertically aligned to the input’s end for a cleaner layout.
  • No changes to input behavior: typing, focus, auto-resize, or sending remain the same; hint still appears only when there is input and the app isn’t loading.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[coderabbitai]

Walkthrough

Refactored SearchInput layout and sizing: increased outer container min-height, introduced a two-layer wrapper around the textarea, moved and right-aligned the hint (non-absolute), and adjusted send button alignment; no event handlers, public exports, or textarea behavior changed.

Changes

Cohort / File(s)	Summary
Search input layout & sizing components/CustomSearchDialog/SearchInput.tsx	Replaced h-10 with min-h-[40px]; introduced outer flex-1 min-w-0 flex flex-col and inner relative flex-1 wrappers; moved textarea into inner wrapper; changed hint from absolute (right-2 bottom-2) to non-absolute right-aligned (text-right pr-2 pb-1); added self-end to send button. No logic or event handling changes.

Sequence Diagram(s)

N/A — no control-flow or feature-level interaction changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix Bugs from QA Docs Feedback #218 — Overlapping edits to components/CustomSearchDialog/SearchInput.tsx affecting textarea/button wrappers and layout classes.

Suggested reviewers

• mcongrove
• jhaynie

Poem

I nibble edges, tuck a clue,
A hint shifted, tidy and true.
Wrappers nested, posture neat,
The send button finds its seat.
A small rabbit hop—UI complete. 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 06e1189 and dbbb27c.

📒 Files selected for processing (1)

• components/CustomSearchDialog/SearchInput.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• components/CustomSearchDialog/SearchInput.tsx

⏰ 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: Workers Builds: docs

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch devin/1757179769-fix-docs-chat-input-overlap

---

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

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	docs	dbbb27c	Commit Preview URL Branch Preview URL	Sep 06 2025, 05:49 PM

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

components/CustomSearchDialog/SearchInput.tsx (2)

67-67: Align units to avoid px/rem drift

Button uses px (w-[40px]) while the new offset uses rem (right-12). Prefer rem for the button too so spacing scales consistently with root font size.

Apply this diff:

-            className="h-[40px] w-[40px] bg-gray-800 hover:bg-gray-900 disabled:bg-gray-200 dark:disabled:bg-gray-700 disabled:text-gray-400 text-white text-sm rounded-lg transition-colors disabled:cursor-not-allowed flex items-center justify-center flex-shrink-0"
+            className="h-10 w-10 bg-gray-800 hover:bg-gray-900 disabled:bg-gray-200 dark:disabled:bg-gray-700 disabled:text-gray-400 text-white text-sm rounded-lg transition-colors disabled:cursor-not-allowed flex items-center justify-center flex-shrink-0"

Also applies to: 75-75

---

68-69: Optional: clarify shortcut behavior in the hint

Key handler supports Shift+Enter for newline; consider reflecting that in the copy.

Apply this diff:

-                        Press Enter to send
+                        Press Enter to send • Shift+Enter for newline

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f8e58bf and 06e1189.

📒 Files selected for processing (1)

• components/CustomSearchDialog/SearchInput.tsx (1 hunks)

⏰ 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: Workers Builds: docs

🔇 Additional comments (1)

components/CustomSearchDialog/SearchInput.tsx (1)

67-67: LGTM: updated offset resolves overlap

Using right-12 (3rem) provides the needed 40px button + 8px gap clearance. Looks good.

[devin-ai-integration]

✅ Fix Implemented and Working

I've successfully implemented the dynamic positioning fix for the hint text in the AI search dialog. The solution changed from absolute positioning to a flex layout approach where the hint text is positioned as a separate element below the textarea.

Key Changes Made:

• Changed container from fixed h-10 to flexible min-h-[40px]
• Implemented flex flex-col layout for the textarea container
• Positioned hint text as separate element with text-right pr-2 pb-1
• Hint text now moves down with textarea expansion and stays at the bottom

Screenshot - Fix Working Correctly:

As you can see in the screenshot, the "Press Enter to send" text now appears at the bottom-right of the expanded textarea component and moves down with the content expansion, exactly as requested. The text is no longer overlapping with the send button or appearing in the middle of the expanded textarea.

Testing Completed:

✅ Tested with long prompts that cause textarea expansion
✅ Verified hint text stays at actual bottom of component
✅ Confirmed no overlap with send button
✅ All CI checks passing

The fix is ready for review and testing!

[afterrburn]

LGTM