Request Details: comment textarea, search clear (X), Change Volunteer/Delete reason dialogs

[Copilot]

Several UX gaps on the Request Details page: comment entry was a single-line input, the search field had no way to clear it, the empty-search state offered no escape, and the Details tab had no Change Volunteer or Delete actions.

CommentsSection

• Comment input → <textarea rows={4}> — multi-line entry consistent with the Create Help Request description field
• Search field — widened from w-1/3 to flex-1; inline × (IoClose) button appears when text is present, clears on click
• Empty search state — when filteredComments.length === 0 && searchText, renders "No comments found" + a Clear Search button instead of a blank area with no affordance

RequestDescription (Details tab)

• Added Change Volunteer (yellow) and Delete Request (red) buttons alongside the existing Edit button
• Each opens a fixed overlay modal with a <textarea rows={4}> to collect a mandatory reason; the confirm action is disabled until the textarea is non-empty

<button onClick={() => { setChangeVolunteerReason(""); setShowChangeVolunteerDialog(true); }}>
  {t("CHANGE_VOLUNTEER")}
</button>

{showChangeVolunteerDialog && (
  <div className="fixed inset-0 z-50 ...">
    <textarea placeholder={t("CHANGE_VOLUNTEER_REASON_PLACEHOLDER")} />
    <button disabled={!changeVolunteerReason.trim()}>{t("SUBMIT")}</button>
  </div>
)}

Translations

11 new i18n keys (CHANGE_VOLUNTEER, CHANGE_VOLUNTEER_REASON, CHANGE_VOLUNTEER_REASON_PLACEHOLDER, DELETE_REQUEST, DELETE_REQUEST_REASON, DELETE_REQUEST_REASON_PLACEHOLDER, CONFIRM_DELETE, NO_COMMENTS_FOUND, CLEAR_SEARCH, WRITE_COMMENT, SEARCH_PLACEHOLDER) added to all 10 active locale files: en, bn, de, es, fr, hi, pt, ru, te, zh.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Issues with Request Details page</issue_title>
<issue_description>Please note that we get data from Dashboard page for the Details tab of this page. Click on any request on Dashboard page and you will land on this page. Issues with this page are listed below.

1. Comments tab: We need slightly a bigger text area similar to Description field in Create Help Request to enter two or three lines in each comment.
2. This part of the task is done Tabs appear slightly different from the tabs we have in our dashboard pages. We are missing consistency across our pages. The 3 tabs here Comments, Volunteers and Details should look like Dashboard tabs with blue underline for selected tab and thin 1px space between each tab.

3. Details tab is still missing some functionality. When Change Volunteer button is clicked, we need to show a small dialog to collect why the beneficiary wants this lead voluntary changed

4. Details tab: When Delete button is pressed, we need to collect the reason for the deletion of the request.

5. This part of the task is done. Details tab: Creation Date seems to be having some issues in this tab. This looks like date and date-time format mismatch since the date in dashboard is DateTime and details tab expects Date only.
   Note: And whenever you add any text, error message, button label etc, it needs to be translated in 12 languages we support. Guide for translation is in wiki of this repository. When you self assign please choose one of the issue above and post it in comments and ETA for it.

6. The Search field in Comments tab needs to extend a little horizontally. Plus it needs a Cancel functionality. e.g. X in the search bar. Right now user needs to clear the entire field manually

7. Also if no related comment found in the Search user is presented with this where user has no option to cancel the search. So here too we need some kind of cancel functionality or add X in No comments found box. Use your better UI judgement here.

Comments on the Issue (you are @copilot in this section)

@meghana-bonthu Hello @rashmi-bilaskar, I would like to start on the comment tab for this issue. Could you please assign me to that?

Thank you.</comment_new>
<comment_new>@rupasree-guttikonda
hi @rashmi-bilaskar , I would like to start on the detail tab for delete button, Could you please assign me to that.</comment_new>
<comment_new>@meghana-bonthu
Hi @rashmi-bilaskar, I have completed the comments tab issue, in which I have changed the text field to 4 lines, and I have also translated that in 12 languages. Could you please check it and tell me if I need to do anything else for the comments tab?

Thank you.</comment_new>
<comment_new>@PriyankaWani66
Hi @rashmi-bilaskar ,
I would like to take up item 2 (Tabs UI consistency between Dashboard and Request Details page).

Thank you.</comment_new>
<comment_new>@rashmi-bilaskar
@meghana-bonthu Please raise a PR to test branch</comment_new>
<comment_new>@rashmi-bilaskar
@AnuhyaPaturu @Venkat009988 @Jaymin20-cloud Please post what part of the task you are working on and the ETA. </comment_new>
<comment_new>@Jaymin20-cloud
@rashmi-bilaskar I was working on task 1223 and I am done with that now ill start woking on this.

@rashmi-bilaskar @Jaymin20-cloud I don't see #1223 is completed. There is no PR raised by you or merged for the task @rashmi-bilaskar > Hi [@rashmi-bilaskar](https://github.com/rashmi-bilaskar) , I would like to take up item 2 (Tabs UI consistency between Dashboard and Request Details page). > > Thank you. @PriyankaWani66 I have updated the item 2 text. Please check that out. If you have any questions please let me know. @shri2606 Hi @rashmi-bilaskar , I would like to start with item 5 date-time mismatch. Could you please assign me to that? @PriyankaWani66 Hi @rashmi-bilaskar, the tab styling changes have been implemented. Please review and let me know if any further changes are needed. PR: [1224-request-tabs-change](https://github.co...

• Fixes Issues with Request Details page #1224

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[netlify]

✅ Deploy Preview for elegant-treacle-3e6cef ready!

Name	Link
🔨 Latest commit	b489669
🔍 Latest deploy log	https://app.netlify.com/projects/elegant-treacle-3e6cef/deploys/69b05bce5a7f6300084fea7c
😎 Deploy Preview	https://deploy-preview-1318--elegant-treacle-3e6cef.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for saayam-webapp-netlify-awa ready!

Name	Link
🔨 Latest commit	b489669
🔍 Latest deploy log	https://app.netlify.com/projects/saayam-webapp-netlify-awa/deploys/69b05bce49d6fa0008a76b96
😎 Deploy Preview	https://deploy-preview-1318--saayam-webapp-netlify-awa.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for musical-gnome-285736 ready!

Name	Link
🔨 Latest commit	b489669
🔍 Latest deploy log	https://app.netlify.com/projects/musical-gnome-285736/deploys/69b05bce0562100008d93d7e
😎 Deploy Preview	https://deploy-preview-1318--musical-gnome-285736.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.