upd

client/src/components/DraggableContainer.tsx

@@ -77,7 +77,7 @@ export default function DraggableContainer({
   constrainToBounds = false,
   initialCorner,
   initialPosition,
-  padding = "20px",
+  padding = "16px",
   className = "",
   onPositionChange,
 }: DraggableContainerProps) {
@@ -329,7 +329,8 @@ export default function DraggableContainer({
     if (position.top !== undefined) style.top = formatValue(position.top);
     if (position.left !== undefined) style.left = formatValue(position.left);
     if (position.right !== undefined) style.right = formatValue(position.right);
-    if (position.bottom !== undefined) style.bottom = formatValue(position.bottom);
+    if (position.bottom !== undefined)
+      style.bottom = formatValue(position.bottom);
 
     return style;
   };

client/src/components/PopupWrapper.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import clsx from "clsx";
 import PopupHeader from "./PopupHeader";
-import DraggableContainer from "./DraggableContainer";
 
 interface PopupWrapperProps {
   children: React.ReactNode;
@@ -19,8 +18,7 @@ function PopupWrapper({
   draggable,
 }: PopupWrapperProps) {
   return (
-    <DraggableContainer
-      constrainToBounds
+    <div
       className={clsx(
         "2xl:rounded-[2.222vw] relative bg-white shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] 2xl:w-[21.667vw] sm:rounded-[32px] max-sm:w-screen max-sm:rounded-t-[32px]",
         className
@@ -37,7 +35,7 @@ function PopupWrapper({
         draggable={draggable}
       />
       <div className="2xl:p-[1.389vw] p-5">{children}</div>
-    </DraggableContainer>
+    </div>
   );
 }
 

client/src/components/popups/ChatPopup.tsx

@@ -4,6 +4,7 @@ import Button from "../ui/Button";
 import { useMe } from "../../hooks/useAuth";
 import clsx from "clsx";
 import PopupWrapper from "../PopupWrapper";
+import DraggableContainer from "../DraggableContainer";
 
 export default function ChatPopup() {
   const [messages, setMessages] = useState<MessageItemProps[]>([
@@ -32,12 +33,14 @@ export default function ChatPopup() {
   }
 
   return (
-    <PopupWrapper title="Чат" draggable className="sm:overflow-hidden">
-      <div className="flex flex-col 2xl:h-[27.778vw] relative 2xl:-m-[1.389vw] -m-5">
-        <MessageFeed messages={messages} />
-        <MessageInput onMessageSend={onMessageSend} />
-      </div>
-    </PopupWrapper>
+    <DraggableContainer constrainToBounds>
+      <PopupWrapper title="Чат" draggable className="sm:overflow-hidden">
+        <div className="flex flex-col 2xl:h-[27.778vw] relative 2xl:-m-[1.389vw] -m-5">
+          <MessageFeed messages={messages} />
+          <MessageInput onMessageSend={onMessageSend} />
+        </div>
+      </PopupWrapper>
+    </DraggableContainer>
   );
 }