UI Experiment: Persona selector should only be visible for large screens

mrdjohnson · Jul 24, 2024 · ad0e8dc · ad0e8dc
1 parent fc9a2e4
commit ad0e8dc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/AttachmentWrapper.tsx b/src/components/AttachmentWrapper.tsx
@@ -5,7 +5,8 @@ import { TransferHandler } from '~/utils/transfer/TransferHandler'
 const AttachmentWrapper = ({
   children,
   accept = 'image/*',
-}: PropsWithChildren<{ accept?: string }>) => {
+  className
+}: PropsWithChildren<{ accept?: string; className?: string }>) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
@@ -16,7 +17,7 @@ const AttachmentWrapper = ({
   }
 
   return (
-    <span>
+    <span className={className}>
       {/* hidden file input */}
       <input
         style={{ display: 'none' }}

diff --git a/src/components/ChatBoxInputRow.tsx b/src/components/ChatBoxInputRow.tsx
@@ -199,11 +199,11 @@ const ChatBoxInputRow = observer(
           className={' h-full min-h-fit w-full ' + (inputDisabled ? 'bg-base-200' : '')}
           onSubmit={onFormSubmit}
         >
-          <div className="join-item flex w-full flex-row justify-between gap-2 bg-base-200 align-middle">
+          <div className="join-item flex w-full flex-col md:flex-row justify-between md:gap-2 bg-base-200 align-middle">
             <button
               tabIndex={0}
               type="button"
-              className="btn btn-active rounded-none rounded-bl-md"
+              className="btn hidden md:flex btn-active rounded-none rounded-bl-md"
               disabled={inputDisabled || connectionModelStore.isImageGenerationMode}
               onClick={() => settingStore.openSettingsModal('personas')}
             >
@@ -212,7 +212,7 @@ const ChatBoxInputRow = observer(
             </button>
 
             <div className="flex">
-              <AttachmentWrapper>
+              <AttachmentWrapper className="mr-auto md:mr-0">
                 <button
                   className="btn btn-ghost rounded-none"
                   type="button"