fix search style

README.md

@@ -1,5 +1,6 @@
 # Insightful guardian
-![](https://images.unsplash.com/photo-1486944936280-f152c82ac151?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
+<!-- ![](https://images.unsplash.com/photo-1486944936280-f152c82ac151?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) -->
+![](docs/scr1.jpeg)
 This is a repository created for learning goals, I'm actually trying to create an analog of telegra.ph, but with a different content moderation and search. I see the problem and try to fix it, but there is no docker image or anything else that can be deployed on a production server. Where I know how to do more efficiently I write, otherwise I ask generative AI. 
 There's fullstack development on `FastAPI`, `React`, `MongoDB`.
 

frontend/src/components/CategoryWidget.js

@@ -19,12 +19,15 @@ const CategoryWidget = () => {
   //   return null;
   // }
   let isLoading = false;
+
   const categories = [
-    {id: 1, name: 'temp'}, {id: 2, name: 'test2temp'}
-  , {id: 3, name: 'test3temp'}, {id: 4, name: 'lorem'}
-  , {id: 5, name: 'test5'}, {id: 6, name: 'test6temp'}
-  , {id: 7, name: 'test7temp'}, {id: 8, name: 'test8'}
+    { id: 1, name: 'Web Dev / backend' },
+    { id: 2, name: 'Web3.0 / Blockchain' }, { id: 3, name: 'I know nothing' },
+    { id: 4, name: 'Pentest web' }, { id: 5, name: 'DevSecOps' },
+    { id: 6, name: 'ML tech.' }, { id: 7, name: 'Linux adm.' },
+    { id: 8, name: 'Mobile pentest' }
   ];
+
   return (
     <div className="categoryWidget">
       <h2>Categories</h2>

frontend/src/components/IndexAllPosts.js

@@ -50,7 +50,10 @@ const IndexAllPosts = () => {
         <div className="IndexAllPosts">
             <h1>Posts.</h1>
             {isLoading ? (
+                <>
                 <img src={loadingGif} alt="Loading..." />
+                <h3>Loading . . . </h3>
+                </>
             ) : (
                 <PostList posts={posts} />
             )}
@@ -59,8 +62,9 @@ const IndexAllPosts = () => {
                 totalPages={totalPages}
                 onPageChange={handlePageChange}
             />
-        </div></div>
+        </div>
         <SearchInput query={query} setQuery={setQuery} handleSearch={handleSearch} />
+        </div>
         </>
     );
 };

frontend/src/styles/pages/_index.scss

@@ -1,5 +1,12 @@
 .IndexPage {
     display: flex;
+    .search-container {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        margin: 0;
+        padding: 0;
+    }
 }
 .IndexAllPosts {
     background-color: #f5f5f5;
@@ -10,7 +17,7 @@
     margin-right: 3rem;
     //max-width: 650px;
     padding: 2rem;
-
+    flex: 1 0;
     h1 {
         color: #333;
         font-size: 2.5rem;
@@ -59,19 +66,19 @@
     }
 
     .posts {
-    display: flex; /* Разбить список на flexbox */
-    flex-wrap: wrap; /* Разрешить перенос элементов на новую строку */
-    justify-content: space-around; /* Распределить элементы равномерно */
-
-    .post {
-        flex: 1 0 300px; 
-        margin: 10px;
-    }
-    @media (max-width: 768px) {
-        .posts .post {
-          flex: 1 0 50%; 
+        display: flex; /* Разбить список на flexbox */
+        flex-wrap: wrap; /* Разрешить перенос элементов на новую строку */
+        justify-content: space-around; /* Распределить элементы равномерно */
+
+        .post {
+            flex: 1 0 300px; 
+            margin: 10px;
+        }
+        @media (max-width: 768px) {
+            .posts .post {
+            flex: 1 0 50%; 
+            }
         }
-      }
 
     }
     @media (max-width: 499px) {