Мой компонент изображения и окно поиска не по центру (React) ⇐ Html

[Anonymous]

Я делал веб-сайт, раньше он выглядел нормально, но был только на рабочем столе в полноэкранном режиме. Я последовал некоторым инструкциям и изменил отображение с сетки на гибкое, а также сделал другие необходимые изменения. Хотя мой веб-сайт теперь отлично выглядит на телефоне, в определенный момент он остается в центре левой части экрана и остается там. Я подозреваю, что в определенный момент, когда изображение и окно поиска расширяются, высота выходит за пределы и вместо того, чтобы выходить за пределы экрана, она остается на месте. пожалуйста, помогите мне
index.html:

Код: Выделить всё

sokrat

App.css:

Код: Выделить всё

body {
background: linear-gradient(to right, #1c1c1c, #343434);
color: white;
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}

.app-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
box-sizing: border-box;
text-align: center;
}

.app-container img {
display: flex;
position:relative;
align-items: center;
justify-content: center;
max-width: 90%;
width: 100%;
max-height: 60vh;
height: auto;
margin-bottom: 2rem;
}

.search-wrapper {
width: 100%;
max-width: 500px;
justify-content: center;
position: relative;
display: flex;
}

.search-box {
position: relative;
width: 100%;
}

.search-input {
padding: 0.8rem 1rem;
width: 100%;
padding: 0.8rem 1rem;
border-radius: 30px;
border: none;
background: rgba(255, 255, 255, 0.06);
color: white;
font-size: 1.05rem;
outline: none;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}

.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 0.5rem;
background: rgba(10, 10, 10, 0.95);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
max-height: 260px;
overflow-y: auto;
z-index: 50;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.suggestion-item {
padding: 10px 14px;
cursor: pointer;
color: #eee;
font-size: 0.96rem;
}

.suggestion-item:hover,
.suggestion-item.active {
background: rgba(255, 255, 255, 0.03);
}

.suggestions strong {
color: #fff;
font-weight: 700;
}

/*For smaller screens*/
@media (max-width: 480px) {
.app-container img {
margin-bottom: 1.5rem;
max-width: 90%;
}

.search-input{
font-size: 0.9rem;
padding: 0.6rem 1rem;
}
}

App.jsx:

Код: Выделить всё

import React from "react";
import PopularTopics from "./component/PopularTopics";
import "./App.css";

export default function App() {
const handleSearch = (query) => {
const randomHash = Math.random().toString(36).substring(2, 10);
const cache = JSON.parse(localStorage.getItem("cr_cache") || "{}");
cache[randomHash] = { query, created: Date.now() };
localStorage.setItem("cr_cache", JSON.stringify(cache));

window.location.href = `/course/${randomHash}`;
};

return (

[img]/images/Sokrat2.png[/img]



);
}

Да благословит Бог всех, кто поможет мне решить эту загадку. если читателю нужна дополнительная информация, просто спросите.
Я просто хочу, чтобы мое изображение и окно поиска постоянно находились в нижней части экрана.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ered-react