Fix scrolling bar issue for long content in chat UI

[BetterAndBetterII]

limit .chatContainer height and expand chatMessageStream

Purpose

fix #2002

prevent the outside scrolling bar by limiting the total height.

extented the chatMessageStream to width 100%, and use padding to constrain the chat messages in center. (in order to allow user to scroll in wide range)

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?

[ ] Yes
[x] No, just css style change

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[ ] Yes
[x] No

Type of change

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Code quality checklist

See CONTRIBUTING.md for more details.

• The current tests all pass (python -m pytest).
• I added tests that prove my fix is effective or that my feature works
• I ran python -m pytest --cov to verify 100% coverage of added lines
• I ran python -m mypy to check for type errors
• I either used the pre-commit hooks or ran ruff and black manually on my code.

[zedhaque]

@BetterAndBetterII - you beat me to it :) thank you for this! I will test later tomorrow and confirm. Appreciate your fix! Cheers

[zedhaque]

@BetterAndBetterII - thank you and it works nicely on mobile too.

[bnodir]

The side panel (Citation tab, etc.) area is getting smaller. How about allowing it to be resized?

[pamelafox]

@bnodir Does the latest change address your desire for resizability?

[BetterAndBetterII]

yeah

…

---Original--- From: "Pamela ***@***.***> Date: Fri, Oct 18, 2024 17:27 PM To: ***@***.***>; Cc: "Yuzhong ***@***.******@***.***>; Subject: Re: [Azure-Samples/azure-search-openai-demo] fix scrolling bar issue(PR #2044) @bnodir Does the latest change address your desire for resizability? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[bnodir]

Does the latest change address your desire for resizability?

Not quite.

copy that, resizable achieved

@BetterAndBetterII - I noticed you added box-sizing: border-box;. I was actually suggesting adding resize: horizontal;.

[BetterAndBetterII]

Does the latest change address your desire for resizability?

Not quite.

copy that, resizable achieved

@BetterAndBetterII - I noticed you added box-sizing: border-box;. I was actually suggesting adding resize: horizontal;.

I'm very sorry, I forgot what you said when I was testing it. I checked it again and you are right. The analysis panel also has the same multiple scroll bars issue, so I adjusted the maximum height limit. The adjustable range of the chat container is also limited.

[bnodir]

@BetterAndBetterII - I'm not a CSS expert, but it seems to be alright when I tested it quickly. Thanks for fixing it!

[pamelafox]

Thank you!