fix: align anonymous ask a question input and improve theme and updated the button styling

[insanekrishnna]

Addressed Issues:

Fixes #520

Problem:

The Ask a Question (Anonymous) section on the debate details page had inconsistent behavior across themes and an alignment issue between the question input and the Send button.

The Send button had a visible gap from the right edge of the input area. In addition, the input styling did not consistently match the application's Light, Dark, and High Contrast themes.

Changes:

• Updated the Send button positioning so it sits flush with the right side of the question input.
• Updated the question input to use theme-aware background, border, and text styling.
• Improved High Contrast visibility by providing an explicit visible border and readable text.
• Preserved appropriate styling for Dark Theme.
• Updated the component's theme-aware styling where required for consistent appearance.

Implementation:

The Send button positioning was updated from:

className="absolute right-2 top-1/2 transform -translate-y-1/2"

to:

className="absolute right-0 top-0 rounded-l-none"

The question input now uses theme-aware styling:

className="w-full pr-24 border-border bg-background text-foreground"

Testing:
Verified the Ask a Question section in Light Theme.
Verified the Ask a Question section in Dark Theme.
Verified the Ask a Question section in High Contrast Theme.
Confirmed the Send button is aligned with the right edge of the input.
Confirmed the input remains clearly visible in High Contrast Theme.
Confirmed the input uses appropriate styling in Dark Theme.
Confirmed Light Theme appearance remains consistent.

Ran:
git diff --check
Confirmed no unrelated files were modified.

Screenshots/Recordings:

Before:

Send button had a visible gap from the input's right edge.
Input styling was inconsistent across themes.

ask.1.mp4

After:

sol-ask.mp4

Send button is aligned flush with the input container.
Input styling is consistent and clearly visible across supported themes.

[coderabbitai]

Warning

Review limit reached

Next included review available in 51 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 270f8e45-c1c1-4a9a-b716-650e96cc25dc

📥 Commits

Reviewing files that changed from the base of the PR and between 9f90f9b and 1e23300.

📒 Files selected for processing (1)

• frontend/src/components/AnonymousQA.tsx

---

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