message_feed: Add Button `quote and reply` to the message bar.

[palashb01]

Changes:

1. Add a `Quote and reply or forward` button in the message_header_bar.

2. Whenever the screen size goes below (1080px), hide the button present in the message_container.

3. Increased the grid column width to avoid overlap of icons with message content.

4. if the screen size goes below (1080px), revert the grid column width to 55px(current value) and hide `Quote and reply or forward` button.

Fixes: #23100

CZO: Thread Demo Video and Screenshots:

• Functionality:

https://user-images.githubusercontent.com/66828942/211964623-c05e19d4-ba99-463e-9e4b-7217f55ae3e1.mp4

• View Port Changes:

• Message container:

• Message container of smaller view port:

• Icons with long messages:

Self-review checklist

• [x] Self-reviewed the changes for clarity and maintainability (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

• [x] Explains differences from previous plans (e.g., issue description).
• [x] Highlights technical choices and bugs encountered.
• [x] Calls out remaining decisions and concerns.
• [x] Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

• [x] Each commit is a coherent idea.
• [x] Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

• [x] Visual appearance of the changes.
• [x] Responsiveness and internationalization.
• [x] Strings and tooltips.
• [x] End-to-end functionality of buttons, interactions and flows.
• [x] Corner cases, error conditions, and easily imagined bugs.

• This is the new PR with latest changes and suggestions, because of some issues I had to close the last PR: #23143

[zulipbot]

Hello @zulip/design members, this pull request was labeled with the "UI experiment" label, so you may want to check it out!

[palashb01]

Hey @alya @sahil839 @amanagr , Could you please review the PR and suggest if any changes are required, Thanks.

[alya]

Overlapping message_content with icons:

Hm, when do you get overlap like that? I don't think we want buttons and content to overlap.

[alya]

@amanagr Would you be up for doing the first round of review on this one?

[palashb01]

Overlapping message_content with icons:

Hm, when do you get overlap like that? I don't think we want buttons and content to overlap.

I have attached the screenshot of the situation to describe the intention of my changes, which I encountered while working on this issue, and made a couple of changes to fix it.

[amanagr]

@palashb01 we don't want message controls to go outside their grid-column width. To avoid overlay, you can increase the column width from 55px so that all the four icons just it in with equal spacing between them.

[palashb01]

@palashb01 we don't want message controls to go outside their grid-column width. To avoid overlay, you can increase the column width from 55px so that all the four icons just it in with equal spacing between them.

Sure will change the code accordingly.

[palashb01]

Hey @amanagr , I have made the suggested changes and updated the PR accordingly, could you please have a look at it and suggest if any more changes are required, Thanks.

[amanagr]

@palashb01 thanks! Next step is posting screenshots of how the decreased width of the message content looks like compared to main on CZO and get approval there.

[palashb01]

@palashb01 thanks! Next step is posting screenshots of how the decreased width of the message content looks like compared to main on CZO and get approval there.

Sure, I will post all the screenshots and will start a CZO thread for the same, Thanks.

[palashb01]

Hey, @alya @amanagr, could you please review the PR and suggest if any changes are required, I have updated the PR description with the most recent screenshots and changes.

[alya]

Thanks! The vertical alignment (and maybe the sizing?) of the icons looks off to me. In this PR:

Without this PR:

[palashb01]

Thanks! The vertical alignment (and maybe the sizing?) of the icons looks off to me. In this PR:

Without this PR:

Okay looking into it, Thanks.

[palashb01]

Hey @alya , I have made the changes suggested by you, could you please review the PR, Thanks.

New Changes:

[alya]

Thanks!

@amanagr Any more feedback from your side? If it looks good to you, please add the "chat.zulip.org review" label.

[amanagr]

LGTM, added the label.

[palashb01]

Hey @alya , could you please review this PR once again? A lot has changed recently, and I have made new changes to include a modern tooltip for the button. Thank you.

[alya]

Thanks! Looks like this part of the issue got left off:

Remove "Quote and reply or forward" from the three-dot message menu.

(just for wide windows where the button is shown, of course)

[alya]

Looks good to me otherwise.

[palashb01]

• [x] Remove "Quote and reply or forward" from the three-dot message menu.

@alya , I have made all the suggested changes and updated the PR description with all the latest changes, could you please review the PR and suggest if any changes are required, Thanks.

[alya]

Cool, thanks, that looks good to me!

@timabbott ready for CZO testing from my perspective, whenever you get a chance.

[palashb01]

@alya , it's been some time, and a lot of changes have been made in the codebase area. I have updated the approach and the PR with the latest changes. Could you please review the PR? Thanks :)

[zulipbot]

Heads up @palashb01, we just merged some commits that conflict with the changes you made in this pull request! You can review this repository's recent commits to see where the conflicts occur. Please rebase your feature branch against the upstream/main branch and resolve your pull request's merge conflicts accordingly.