Skip to content

fix: prevent textarea resize overlapping buttons in rejection dialog#27749

Merged
sahitya-chandra merged 3 commits intocalcom:mainfrom
AhmadYasser1:fix/rejection-dialog-textarea-resize
Feb 8, 2026
Merged

fix: prevent textarea resize overlapping buttons in rejection dialog#27749
sahitya-chandra merged 3 commits intocalcom:mainfrom
AhmadYasser1:fix/rejection-dialog-textarea-resize

Conversation

@AhmadYasser1
Copy link
Copy Markdown
Contributor

@AhmadYasser1 AhmadYasser1 commented Feb 8, 2026

Summary

  • Prevents the rejection reason textarea from being manually resized to overlap the dialog footer buttons
  • Adds resize-none to the TextAreaField to disable the drag-to-resize handle

Changes

  • apps/web/components/dialog/RejectionReasonDialog.tsx: Add className="resize-none" to the TextAreaField

Root Cause

The TextAreaField component renders a native <textarea> element which is resizable by default in most browsers. In the rejection dialog, the textarea can be dragged past the dialog footer, causing the textarea to overlap the "Close" and "Reject the booking" buttons, making them hard or impossible to click.

Fix

Add resize-none (Tailwind utility) to disable manual resizing:

<TextAreaField
  name="rejectionReason"
  className="resize-none"
  ...
/>

Reproduction

  1. Navigate to Bookings page
  2. Find an unconfirmed booking and click Reject
  3. In the rejection dialog, grab the textarea's bottom-right resize handle
  4. Drag it downward
  5. Bug: The textarea expands over the "Close" and "Reject the booking" buttons

Test plan

  • Open rejection dialog on an unconfirmed booking
  • Verify the textarea resize handle is no longer visible
  • Verify text entry and scrolling within the textarea still works
  • Verify the dialog buttons remain fully visible and clickable
  • yarn type-check:ci --force passes (10/10 tasks)
  • yarn biome check — no new warnings

Fixes #17536


Open with Devin

The rejection reason textarea in the booking rejection dialog allows
manual resizing via the drag handle, which can cause it to expand over
the dialog footer buttons. Adding resize-none prevents this overlap.

Fixes calcom#17536
@github-actions github-actions bot added Low priority Created by Linear-GitHub Sync ui area: UI, frontend, button, form, input 🐛 bug Something isn't working labels Feb 8, 2026
@AhmadYasser1
Copy link
Copy Markdown
Contributor Author

AhmadYasser1 commented Feb 8, 2026

Before / After

Before

The textarea can be resized via the drag handle, overlapping the dialog buttons:

BEFORE.-.Cal.com.Rejection.Dialog.mov

After

The textarea resize handle is removed, buttons always remain visible:

AFTER.-.Cal.com.Rejection.Dialog.mov

@AhmadYasser1 AhmadYasser1 marked this pull request as ready for review February 8, 2026 17:58
@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Feb 8, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 1 file

Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 2 additional findings.

Open in Devin Review

Copy link
Copy Markdown
Member

@sahitya-chandra sahitya-chandra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution, but pushed appropriate changes to prevent the component's actual behavior instead of disabling resize.

Screencast.from.2026-02-09.01-29-57.webm

@sahitya-chandra sahitya-chandra added the run-ci Approve CI to run for external contributors label Feb 8, 2026
@sahitya-chandra sahitya-chandra enabled auto-merge (squash) February 8, 2026 20:03
@sahitya-chandra sahitya-chandra merged commit 794046c into calcom:main Feb 8, 2026
101 of 111 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working community Created by Linear-GitHub Sync Low priority Created by Linear-GitHub Sync ready-for-e2e run-ci Approve CI to run for external contributors size/XS ui area: UI, frontend, button, form, input

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When expanding Reason for rejecting text box button doesn't move and obscures the box

2 participants