.quizEditor .editHeader { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-content: stretch } .quizEditor .editHeader .returnButton { flex-basis: 10%; display: flex; justify-content: center; } .quizEditor .editHeader .title { flex-basis: auto; } .quizEditor .editHeader .dumb { flex-basis: 10%; } .quizEditor .editSection { width: 100%; height: 78vh; display: flex; } .quizEditor .editSection .edit { flex: 50%; padding: 5px; display: flex; flex-direction: column; gap: 5px; overflow: auto; } .quizEditor .editSection .edit code { cursor: pointer; padding-bottom: 5px; } .quizEditor .editSection .edit .upload { display: flex; width: 100%; flex-direction: row; align-items: right; justify-content: center; gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .upload .dropArea { flex-direction: column; /* align-items: stretch; */ } } input[type="file"] { height: 100%; width: 100%; } .quizEditor .editSection .edit .upload .dropArea { display: flex; border: 1px dotted; width: 100%; padding: 10px; align-items: center; justify-content: center; /* justifyContent: center; alignItems: center; backgroundColor: dragIsOver ? "lightgray" : "white; */ } .quizEditor .editSection .preview { flex: 50%; padding: 5px; overflow: auto; }