CSS changes for responsive design

[zedhaque]

Purpose

This PR introduces changes in the CSS files to enhance responsiveness in the chat app, supporting the most common breakpoints. Additionally, it transitions styling units from pixels to rem/em for better scalability across devices. This PR does not include the implementation of a sticky header or any other changes requiring modifications to .tsx files; those will be addressed in a subsequent PR.

#1458

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?
If you're not sure, try it out on an old environment.

[ ] Yes
[X] No

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

[ ] Bugfix
[X] 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]

@microsoft-github-policy-service agree company="Zed Haque Pty Ltd"

…

On 23 May 2024, at 8:54 AM, microsoft-github-policy-service[bot] ***@***.***> wrote: @zedhaque <https://github.com/zedhaque> please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information. @microsoft-github-policy-service agree [company="Zed Haque Pty Ltd"] Options: (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer. @microsoft-github-policy-service agree (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer. @microsoft-github-policy-service agree company="Microsoft" Contributor License Agreement <http://www.opensource.org/> — Reply to this email directly, view it on GitHub <#1646 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A623FECEPUNVUCS3F4PULO3ZDUO3DAVCNFSM6AAAAABIEQXYXCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRVHEYTCNBUGU>. You are receiving this because you were mentioned.

[pamelafox]

Thanks so much @zedhaque ! I'll take a look at this soon. I might try to run our Playwright tests against it, since it's in theory easy to tell Playwright to test mobile size configurations.

[zedhaque]

@pamelafox - reviewing this. I haven’t tried playwright before. I will see if this is something I can also implement on my end. There are still some known issues - I am trying to fix. Just let me know your findings and will update accordingly.

[pamelafox]

@zedhaque I've run prettier on the files, and then used Playwright to run our two main tests for the Chat and the Ask tab at the various breakpoints used in the media queries. The Chat tests pass (and they failed before!), but the Ask tests break due to the "Ask" link being completely hidden in the header. Is it possible to un-hide that in this PR, or does that require the larger fix? If it's already the case in the main branch that it's hidden, I can just remove the viewport tests from the Ask endpoint and you can add those in the next PR.

[zedhaque]

Thanks @pamelafox - I will update the branch and unhide the link and update you on this thread this weekend.

[zedhaque]

@pamelafox - I ultimately implemented a hamburger menu, as you suggested earlier. It's expandable, featuring options like "Chat with HR" and "Chat with JIRA". I made adjustments to the layout.tsx file to accommodate this. I have a couple of questions:

• Are you in favor of sticking with the hamburger menu?
• I propose replacing the current title with "Azure OpenAI + AI Search" and relocating the existing content accordingly.
• Regarding the GitHub logo and link, should we remove them entirely or place them alongside the new title?
  Do you have any other changes in mind that you'd like me to incorporate?

Thanks.

[pamelafox]

• I think the hamburger menu is the only way to reliably fit the options at low sizes. The world has collectively agreed.
• Yes, let's just use "Azure OpenAI + AI Search" and drop the other one.
• I think we can drop GitHub logo/link.