style: options in mobile

client/src/components/Input/BingAIOptions/index.jsx

@@ -64,7 +64,7 @@ function BingAIOptions() {
     <>
       <div
         className={
-          'openAIOptions-simple-container flex w-auto items-center justify-center gap-2' +
+          'openAIOptions-simple-container flex w-full flex-wrap items-center justify-center gap-2' +
           (!advancedMode ? ' show' : '')
         }
       >
@@ -77,7 +77,7 @@ function BingAIOptions() {
           showLabel={false}
           className={cn(
             cardStyle,
-            'min-w-36 z-50 flex h-[40px] w-36 items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
+            'min-w-36 z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
           )}
         />
 
@@ -85,7 +85,7 @@ function BingAIOptions() {
           value={toneStyle}
           className={
             cardStyle +
-            ' z-50 flex h-[40px] items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
+            ' z-50 flex h-[40px] flex-none items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-600'
           }
           onValueChange={value => setOption('toneStyle')(value.toLowerCase())}
         >
@@ -120,7 +120,7 @@ function BingAIOptions() {
           type="button"
           className={cn(
             cardStyle,
-            'min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
+            'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
           )}
           onClick={triggerAdvancedMode}
         >

client/src/components/Input/ChatGPTOptions/index.jsx

@@ -34,7 +34,7 @@ function ChatGPTOptions() {
     'transition-colors shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
 
   return (
-    <div className="openAIOptions-simple-container show flex w-auto items-center justify-center gap-2">
+    <div className="openAIOptions-simple-container show flex w-full flex-wrap items-center justify-center gap-2">
       <SelectDropdown
         value={model}
         setValue={setOption('model')}
@@ -43,7 +43,7 @@ function ChatGPTOptions() {
         showLabel={false}
         className={cn(
           cardStyle,
-          'min-w-48 z-50 flex h-[40px] w-48 items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
+          'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
         )}
       />
     </div>

client/src/components/Input/OpenAIOptions/index.jsx

@@ -75,7 +75,7 @@ function OpenAIOptions() {
     <>
       <div
         className={
-          'openAIOptions-simple-container flex w-auto items-center justify-center gap-2' +
+          'openAIOptions-simple-container flex w-full flex-wrap items-center justify-center gap-2' +
           (!advancedMode ? ' show' : '')
         }
       >
@@ -97,14 +97,14 @@ function OpenAIOptions() {
           showLabel={false}
           className={cn(
             cardStyle,
-            'min-w-48 z-50 flex h-[40px] w-48 items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
+            'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
           )}
         />
         <Button
           type="button"
           className={cn(
             cardStyle,
-            'min-w-4 z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
+            'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-4 hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 dark:hover:bg-gray-600'
           )}
           onClick={triggerAdvancedMode}
         >

client/src/components/Input/index.jsx

@@ -129,7 +129,7 @@ export default function TextChat({ isSearchView = false }) {
     <>
       <div className="fixed bottom-0 left-0 w-full md:absolute">
         <div className="relative py-2 md:mb-[-16px] md:py-4 lg:mb-[-32px]">
-          <span className="ml-1 flex flex-col items-center justify-center gap-0 md:order-none md:m-auto md:w-full md:gap-2">
+          <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
             <OpenAIOptions />
             <ChatGPTOptions />
             <BingAIOptions />