search

mckaywrigley / chatbot-ui

AI chat for every model.
https://chatbotui.com
MIT License
27.39k stars 7.61k forks source link

Mobile UI Zooming #1733

Open augustobob opened 1 month ago

augustobob commented 1 month ago

Hi there, thanks for the hard work, I want to ask for a change in the mobile ui, I don't know how to do, but I know its probably a simple fix. I have an iOS device and safari likes to zoom in text boxes, there's some fixes to prevent this behavior and it would be extremely helpful for us in iOS. Sorry for my low effort issue, hope you understand my suggestion. Thanks

image

thehackergpt commented 1 month ago

@augustobob Try adding this:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

into layout.tsx in the <head> section, like this:

export default async function RootLayout({
  children,
  params: { locale }
}: RootLayoutProps) {
  // ... other code

  return (
    <html lang="en" suppressHydrationWarning className="h-full">
      <head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
      </head>
      <body className={inter.className + " h-full"}>
        {/* ... other code */}
      </body>
    </html>
  )
}

This should help prevent the zooming issue on iOS devices.

thehackergpt commented 1 month ago

@augustobob, did it help?

augustobob commented 1 month ago

@thehackergpt hi, thank you for your suggestion..actually I haven't had the time to try it yet, but I will soon. Based on my previous experiences with this Safari behavior, I believe it will work. Is there any chance this code could be implemented? Thank you.