I see the problem with your background exceeding your content. There are a few items you need to change.
The primary issue is that your div with the class "todo-box" has a position of absolute (I'll start referring to this as div.todo-box or just .todo-box). The property absolute position takes it out of the normal content flow. It is now positioned within the closest element that has position relative. If no ancestors have position relative, it becomes relative to the window.
I suggest you study CSS Flex-Box and CSS Grid for your layout properties.
The reason this is important is that your primary element (div.App) is now functionally empty.
Position absolute should be used sparingly, and almost never on your primary content.
Here is what I changed to make it work:
-
On div.todo-box, remove "position: absolute"
-
On div.App, change "height = 100vh" to "min-height = 100vh"
This will fix the problem where your background cuts off, but it will mess up the formatting for the child elements within div.todo-box. It will also make your todo-box align to the left side of the screen.
You can recenter your content by modyfing div.App as follows:
display: flex;
justify-content: center;
padding-top: 100px;
This will look better but your dark mode toggle will still have absolute positioning, which will move it to the top-right of the screen.
Remove position absolute (as well as the top and right properties). This will place it directly under your heading.
I would wrap the heading and the image in a parent div. Let's call it div.heading. So it would look like this:
<div class="heading">
<h1>todo</h1>
<img .../>
</div>
Now the CSS
.heading {
display: flex;
justify-content: space-between;
}
This has almost worked, but your hidden icon is blocking the shown icon from being where it wants. This is because you used "opacity: 0" to hide it. Opacity does not remove the item from the flow of the body. It only makes it less visible, but it is still taking up space. What you can do instead is apply "display: none". This will remove it from the flow of the body, allowing your shown icon to fit where you want.
Your icon will need to have some new properties applied to get it to have the shape you want.
A few other notes:
I didn't like the interface of needing to click on the checkbox in order to submit a new item. It would be better if I could press enter to submit the item, clear the input field, and place the cursor back into the now empty input field, ready for another new item.
Also, the positioning of the checkmark within the checkboxes is off. In my previous comment, I mentioned that you should study up on Flex-Box. This is another expample of where you could use Flex-Box (or Grid).
The project looks decent otherwise. Good job!
