Merge pull request #36 from eugeneanokye99/master

Scroll on search results y overflow

Author: alanansari

package-lock.json

@@ -16,8 +16,8 @@ function SearchComp (props){
     return <>
         <div className="searchcomp POPUPBG ">
 
-        {(props.displaypic === null) ? ( <img src={avatar}  id="picincircle" />) :
-                   ( <img src={props.displaypic} id="picincircle"/>) 
+        {(props.displaypic === null) ? ( <img src={avatar}  id="picincircle" alt="avatar" />) :
+                   ( <img src={props.displaypic} id="picincircle" alt="displaypic"/>) 
 
                 }
                 <div className="searchNames">

src/component/Sidebar/SearchComp.jsx

@@ -123,7 +123,7 @@ function Sidebar() {
             dispatch(SearchTweetWithTag(e.target.value.slice(1)))
         }
         dispatch(SearchUser(e.target.value));
-        if (e.target.value != "") {
+        if (e.target.value !== "") {
             document.getElementById("HOME2").style.display = "none"
             document.getElementById("SIDESEARCH").style.display = "flex"
         }
@@ -262,7 +262,7 @@ else{
                 navigate("/notification")
             }}/>
                 <div className="navSearch1">
-                    <img src={searchIcon} className="navSearch2" onClick={() => {
+                    <img src={searchIcon}alt="search" className="navSearch2" onClick={() => {
                         navigate("/phonesearch")
                     }} />
                 </div>
@@ -300,10 +300,11 @@ else{
             <div id="SEARCHBOX">
                 <div className="searchBar">
                     <div className="searchBar_box">
-                    <img src={searchIcon} className="searchIcon" />
+                    <img src={searchIcon} className="searchIcon" alt="search" />
                     <input className="searchbar POPUPBG" type="text" value={search} onChange={handleSearch} placeholder="Search" />
                     </div>
                 </div>
+            
                 <div className="searchFlexBox POPUPBG" id="SIDESEARCH">
                     {tohash ? (
                         searchTweetList.length > 0 ? (searchTweetList.map((se) => {

src/component/Sidebar/SideBar.jsx

@@ -218,19 +218,19 @@ a:hover {
 
 /* SEARCH BAR */
 
-/* #SIDESEARCH{
-    position:fixed;
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-} */
-
 .searchFlexBox {
     position: fixed;
-    top:90px;
+    top: 90px;
     left: 70vw;
     /* width: 50vw; */
     display: flex;
     flex-direction: column;
+    position:fixed;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    position: absolute;
+    max-height: 550px; 
+    overflow-y: auto;
 }
 .searchBar{
     display: flex;
@@ -410,10 +410,10 @@ margin-left:-0.2vw;
     .searchbar{
         display: none;
     }
-    .searchFlexBox{
+    /* .searchFlexBox{
         display: none;
        
-    }
+    } */
     .searchcomp, .searchAlter{
         display: none;
           /* display:flex; */