worstka

chat_final_bootstrap/src/App.scss

@@ -52,11 +52,6 @@ body {
     min-width: 250px;
 }
 
-.allUsersList {
-    max-height: calc(100vh - 300px);
-    overflow: auto;
-}
-
 .avatarka {
     > img,
     > div {
@@ -141,6 +136,12 @@ body {
     }
 }
 
+.AllUsersList {
+    max-height: calc(100vh - 285px);
+    min-height: calc(100vh - 285px);
+    overflow: auto;
+}
+
 .messagesArea {
     max-height: calc(100vh - 20px);
     background-color: red;

chat_final_bootstrap/src/Layout/AllUsersList.js

@@ -11,40 +11,6 @@ import { useRef } from "react";
 import history from "../history";
 import { CUserInfo } from "../Layout";
 
-// заглушка для отладки на случай "сервер лег / вырубили свет"
-const AllUsersConst = [
-    {
-        _id: "5e25e0a41719bf13be585729",
-        login: "test3",
-        nick: "",
-        avatar: null,
-    },
-    {
-        _id: "5e25bf671719bf13be5856c4",
-        login: "t",
-        nick: "t",
-        avatar: null,
-    },
-    {
-        _id: "5f3e4cd7c3de58221910d207",
-        login: "Kiliar",
-        nick: "Kiliar",
-        avatar: null,
-    },
-    {
-        _id: "5f528e96c3de58221910d20c",
-        login: "mdm1",
-        nick: "jj",
-        avatar: null,
-    },
-    {
-        _id: "5f568538c3de58221910d20e",
-        login: "11",
-        nick: "11",
-        avatar: null,
-    },
-];
-
 const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUserFromList = null, newChatUsers }) => {
     const avatarUrl = avatar && avatar.url;
 
@@ -68,7 +34,7 @@ const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUse
     return (
         <>
             <li
-                className={`list-group-item list-group-item-${
+                className={`m-2 list-group-item-${
                     _id in newChatUsers || _id === myId ? "success rounded-pill shadow" : "light rounded-3 shadow-sm"
                 } m-1 gradient border-2 `}
                 onClick={doSelectUser}
@@ -128,9 +94,6 @@ const AllUsersList = ({
     createNewChatList = null,
     searchUserStr,
 }) => {
-    //  FIXME: следующая строка - для отладки без инета
-    // searchUserResultArr = AllUsersConst;
-
     // создаем новый список пользователей нового чата со мной во главе
     useEffect(() => {
         if (typeof createNewChatList === "function")
@@ -172,9 +135,8 @@ const AllUsersList = ({
         .sort((a, b) => ((a.nick || a.login) > (b.nick || b.login) ? 1 : -1));
 
     return (
-        <div className="bg-light">
-            <h6>Choose members:</h6>
-            <ul className="list-group allUsersList" role="tablist">
+        <div className="bg-light AllUsersList rounded-3">
+            <ul className="list-group " role="tablist">
                 {!!searchUserResultArr &&
                     searchUserResultArr.map((user) => <CUserItem key={user._id} {...user} myId={myId} />)}
             </ul>

chat_final_bootstrap/src/Pages/PageNewChat.js

@@ -14,11 +14,9 @@ import logo from "../images/logo23.png";
 import chat_square_text from "../icons/chat-square-text.svg";
 import userEvent from "@testing-library/user-event";
 
-// prettier-ignore
 const PageNewChat = ({ doSearchUsers = null, match: { params: { _chatId = "" } = {} } = {} }) => {
     const [searchUserStr, setSearchUserStr] = useState("");
 
-
     // если не залогинены - вперед к регистрации/логину
     if (!store.getState().auth || !store.getState().auth.login) {
         history.push("/");
@@ -37,30 +35,39 @@ const PageNewChat = ({ doSearchUsers = null, match: { params: { _chatId = "" } =
     // }, []);
 
     return (
-        <>
+        <div className="maxWidthPageMain">
             <div className="container-fluid">
                 <div className="row g-3">
-                    <div className="col-md-4  bg-light gradient shadow-sm border-2 rounded-3">
-                        <CUserInfo />
-                        <ButtonToMain />
-                        <ButtonCancel />
+                    <div className="col-md-4">
+                        <div className="maxWidthForSideBar shadow">
+                            <div className="bg-light gradient shadow-sm border-2 rounded-3 flex-grow-1">
+                                <CUserInfo />
+                                <ButtonToMain />
+                                <ButtonCancel />
+
+                                <div className="p-2">
+                                    <input
+                                        className="form-control mb-2 border border-success border-2"
+                                        placeholder="Search users by nick/login/_id"
+                                        onInput={(e) => {
+                                            setSearchUserStr(e.target.value);
+                                        }}
+                                    ></input>
+                                </div>
 
-                        <input
-                            className="form-control mb-2 p-2 border border-success border-2"
-                            placeholder="Search users by nick/login/_id"
-                            onInput={(e) => {
-                                setSearchUserStr(e.target.value);
-                            }}
-                        ></input>
+                                <h6 className="ms-2 fs-4">Choose members:</h6>
 
-                        <CAllUsersList searchUserStr={searchUserStr} />
+                                <CAllUsersList searchUserStr={searchUserStr} />
+                            </div>
+                        </div>
                     </div>
+
                     <div className="col-md-8">
                         <CNewChatDashBoard _chatId={_chatId} />
                     </div>
                 </div>
             </div>
-        </>
+        </div>
     );
 };