Text with property text-overflow:ellipsis; pushing text to the left - html

Question

I am working on a react project and I am creating a note taking application with a simple text editor. I have a simple note component that is just a div element with an h3 inside that has these styles:
note {
border-bottom: 1px solid gray;
width: 100%;
padding: 1rem;
box-sizing: border-box;
}
.note h3 {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.note:hover {
cursor: pointer;
}
.note.selected {
background: #c9d4d1;
}
Here is also the React code for the note component:
import { useContext, useEffect } from 'react';
import { NotesContext } from '../../App';
import { ResponsiveContext } from '../containers/AppContainer/AppContainer';
import './Note.css';
const Note = ({ note }) => {
const { selectedNoteId, setSelectedNoteId } = useContext(NotesContext);
const toggleEditorView = useContext(ResponsiveContext);
const handleClick = () => {
setSelectedNoteId(note.id);
toggleEditorView();
console.log(note.id);
}
const calculateStyles = selectedNoteId === note.id ? 'note selected' : 'note';
return (
<div onClick={handleClick}
className={calculateStyles}>
<h3>{note.displayTitle || 'New Note'}</h3>
</div>
)
};
export default Note;
I also have a note list which lists all the notes on the left but posting that code as well would make this post so long, you can go to the github repo to see all the code.
When I try to style the text using the text editor and make it a heading (this happens only when I try to make it a heading, when I try to make the text bold and italic it works fine) the first note's text gets pushed to the left if it is long enough (it only happens on the first note no matter which note you are styling with the text editor) and I don't see any updates through the elements tab on the dev tools the element doesn't flash. It is kind of hard to explain what the problem is so I recorded a video showing the exact problem that I am having.