Ensure Azure ChatGPT is responsive for mobile devices

[Zenulous]

I'm sure the team is aware of this: the current sample is not responsive on mobile at all.

I understand that this is a starter repo and that the focus is more on providing a private solution with a Cosmos data store. However, making the UI work well on different devices is a bit of a no-brainer to me. Thanks for the consideration.

[giuliohome]

Done a similar change in my copy in src/features/chat/chat-menu/chat-menu.tsx

'use client'
import { FC, useState } from 'react';

....
interface Prop {
 items : Array<ChatThreadModel>
}


const ChatMenu : FC<Prop>= async (prop) => {
  
  const [isOpen, setIsOpen] = useState(false);
  
  return (

        <div><button onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? '-' : '+'}
        </button>
   {isOpen ? <Menu  >
      <MenuHeader className="justify-end">
       
....

And changed also src/app/chat/layout.tsx

const DynChatMenu = dynamic(() => import('@/features/chat/chat-menu/chat-menu'), { ssr: false });

...

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const items : ChatThreadModel[] = await FindAllChatThreadForCurrentUser();
  
  return (
    <ProtectedPage>
      <MainMenu />
      <DynChatMenu items={items} />
      <div className="flex-1">{children}</div>
    </ProtectedPage>
  );
}

[giuliohome]

[oliverlabs]

@giuliohome, that's great. Which branch in your repo has this changes? I couldn't find it. Could you submit a PR or post full code? The snippets are difficult to interpret.

[giuliohome]

Sorry did all that from my mobile, used a private github and codespaces while on holiday to my azure subscription. Will post my PR if needed for sure, no worries, but here the developers are better than me at UI design of course!

[thivy]

Added this to the backlog item

[oliverlabs]

any updates on this? @thivy