Fix Notepad UI layout - remove unwanted menu bar gap, correct height calculation, and fix title bar visibility

[Copilot]

Fixes the Notepad UI layout issues where the menu bar had an unwanted gap below the title bar, the text area height was incorrectly calculated, and the title bar was being hidden by overlapping elements.

Problem

The Notepad window had three visual issues:

1. Unwanted gap: There was an 18px gap between the title bar and menu bar due to margin-top: 18px in the menu bar styling
2. Incorrect text area sizing: The window body height calculation (calc(100% - 48px)) didn't properly account for both the title bar and menu bar heights
3. Hidden title bar: After initial fix, the title bar was being hidden because the menu bar was overlapping it at the same Y position

Solution

Made minimal changes to fix the layout:

• Removed margin-top: 18px from the .notepad-menubar styling
• Updated window body height from calc(100% - 48px) to calc(100% - 50px) to properly account for:
  • Title bar: ~30px
  • Menu bar: ~20px
  • Total: ~50px
• Fixed title bar visibility by positioning menu bar with top: 20px to place it properly below the title bar instead of overlapping

Changes were applied consistently to both build.js and public/index.html.

Screenshots

Before (title bar hidden by overlapping menu bar):

After (title bar visible and properly positioned):

Final verification with functionality:

Result

The Notepad now displays with the correct Windows 98 appearance:

• Title bar is fully visible with "📝 Notepad" text and window controls
• Menu bar sits properly below the title bar with no gap or overlap
• Text area properly fills the remaining window space
• All functionality (typing, menus, window controls) works correctly
• Matches the expected classic Windows Notepad layout perfectly

Fixes #43

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Notepad UI is not correct</issue_title>
<issue_description>Use this image as a reference for how it should look

</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #43

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[jcleigh]

@copilot in your screenshots, the title bar is missing from the Notepad window

[Copilot]

@copilot in your screenshots, the title bar is missing from the Notepad window

You're absolutely right! The title bar was being hidden by the menu bar overlapping it. The issue was that when I removed margin-top: 18px, both elements ended up at the same Y position. Fixed in commit d2df736 by positioning the menu bar with top: 20px to place it properly below the title bar.