Make send button and message input not overlap

ably · Jun 26, 2024 · 34a74af · 34a74af
1 parent f079ed0
commit 34a74af
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/demo/src/components/MessageInput/MessageInput.tsx b/demo/src/components/MessageInput/MessageInput.tsx
@@ -38,22 +38,22 @@ export const MessageInput: FC<MessageInputProps> = ({
   return (
     <form
       onSubmit={handleFormSubmit}
-      className="relative flex"
+      className="flex"
     >
       <input
         type="text"
         value={value}
         onChange={handleValueChange}
         disabled={disabled}
         placeholder="Type.."
-        className="w-full focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-2 bg-gray-200 rounded-md py-1"
+        className="w-full focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-2 pr-2 bg-gray-200 rounded-l-md py-1"
         autoFocus
       />
-      <div className="absolute right-0 items-center inset-y-0 hidden sm:flex">
+      <div className="items-center inset-y-0 hidden sm:flex">
         <button
           disabled={disabled}
           type="submit"
-          className="inline-flex items-center justify-center rounded-md px-3 py-1 transition duration-500 ease-in-out text-white bg-blue-500 hover:bg-blue-400 focus:outline-none"
+          className="inline-flex items-center justify-center rounded-r-md px-3 py-1 transition duration-500 ease-in-out text-white bg-blue-500 hover:bg-blue-400 focus:outline-none"
         >
           Send
           <svg