client: add search indicator

client/src/components/card/closed-debate-card.css

@@ -143,7 +143,6 @@
     }
 
     #closed-card .left p {
-        -webkit-line-clamp: 2;
         font-size: 15px;
     }
 

client/src/components/sidebar/explore.tsx

@@ -46,6 +46,7 @@ const Explore: React.FC<ExploreProps> = ({ term }) => {
                         }}
                         style={{ borderColor: formSubmitted && searchTerm.trim() === "" ? "var(--body_color)" : "" }}
                         className={formSubmitted && searchTerm.trim() === "" ? "shake" : ""}
+                        autoFocus={location.pathname === '/search'}
                     />
                 </div>
                 <div>

client/src/components/sidebar/right-sidebar.css

@@ -86,7 +86,7 @@
 
 @media screen and (max-width: 480px) {
     #right-sidebar .right-sidebar__container {
-        padding: 0 15px;
+        padding: 0 10px;
         display: flex;
         align-items: center;
         background-color: var(--nav-foot__background);

client/src/pages/search/index.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import Explore from "../../components/sidebar/explore";
 import { IoMdClose } from "react-icons/io";
+import { PiArrowBendUpRightBold } from "react-icons/pi";
 
 export default function SearchPage() {
     const location = useLocation();
@@ -30,7 +31,7 @@ export default function SearchPage() {
         <div id='search'>
             <Explore term={searchTerm} />
 
-            {searchTerm && (
+            {searchTerm ? (
                 <>
                     <div className='search-term'>
                         <h1>
@@ -44,6 +45,11 @@ export default function SearchPage() {
                         </button>
                     </div>
                 </>
+            ) : (
+                <div className='search-here'>
+                    <PiArrowBendUpRightBold size={50} />
+                    <h2>Search here</h2>
+                </div>
             )}
         </div>
     );

client/src/pages/search/style.css

@@ -32,10 +32,22 @@
     color: var(--body_color);
 }
 
+#search .search-here {
+    margin-top: 60px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
 @media screen and (max-width: 767px) {
     #search #explore {
         display: flex;
     }
+
+    #search .search-here {
+        display: none;
+    } 
 }
 
 @media screen and (max-width: 480px) {