Enhancement: Reduce Vertical Spacing Between Global Navigation Header and Note Container

[gun666vald]

Issue Description:

1. Problem Statement

The vertical gap/spacing between the persistent global navigation bar (containing "Home", "New Note", "Tags", "Folders", "Menu") and the note page viewport is currently quite large.

This introduces unnecessary whitespace at the top of the interface, pushing the note header and the editor canvas further down the screen before writing can even begin.

---

2. Proposed Solution

To create a more compact, cohesive, and content-focused interface, we should minimize the vertical margin and padding variables separating the global layout header and the note workspace:

1. Reduce Global Header Bottom Margin: In App.vue (or the global layout template), reduce the bottom margin of the navigation header component (e.g. from mb-6 or mb-8 down to a clean mb-2 or mb-3).
2. Compress Router-View Wrapper Padding: Tighten the vertical padding surrounding the main <router-view> container (e.g. from py-6 or py-8 down to py-2 or py-3).

---

3. Expected Benefits

• Design Cohesion: Brings the active note editor closer to the navigation controls, making the UI feel like a unified, distraction-free writing application.
• Reclaimed Vertical Space: Reclaims crucial pixels from the very top of the interface, keeping your editor workspace fully visible even under high browser zoom levels.

[BobWs]

Hi @gun666vald, thanks again for filing this so clearly — two detailed issues in one day is very helpful and shows real investment in the product.

After looking closely at this request, I've decided not to implement the proposed spacing reductions, and I want to explain why the situation is more complex than it might appear from the note page.

This is a global layout change, not a note-specific one

The spacing you're referring to lives in two places: the outer shell padding in App.vue (py-4) and the navbar bottom margin in NavBar.vue (mb-2 md:mb-12). The key thing to understand is that these values apply to every single route in the application — not just the note view and editor.

Reducing the navbar bottom margin globally means that spacing also changes on the Home page, the Search Results page, Settings, Attachments, Trash, Archive, Bookmarks, and Templates. Each of those pages has its own page header — a title like "Attachments" or "Settings" with a subtitle beneath it — and those headers already sit close to the navbar. Compressing the gap further would make those pages feel cramped and unbalanced. The current spacing was deliberately chosen to give every page a consistent, breathable layout so the app feels cohesive regardless of which route you're on.

The note page is not the only page that matters

It's easy to focus on the note editor and think "there's too much space at the top," but if you open Settings, or the Attachments page, or the Trash view after making this change, you'd immediately notice that those pages now feel tight and uncomfortable — the page header would be pressing against the navbar with very little visual separation. Maintaining that consistency across all pages is a deliberate design principle I'm not willing to compromise for a gain that only benefits one route.

What's already available

The vertical density concern is genuinely understood, and it's already addressed through the Wide and Fullscreen view modes in Settings → Preferences. In Fullscreen mode, the note editor and viewer use the full available viewport width and height, maximising the writing canvas substantially. If you haven't tried that yet, it may already give you the focused, space-efficient experience you're looking for.

Additionally, the targeted <hr> margin reduction I mentioned in Issue #37 will recover some vertical space within the note header itself — that's a safer, scoped improvement.

If demand grows

If a significant number of users specifically request a more compact navbar-to-content gap, a future option worth considering would be an opt-in Compact Mode in Preferences that tightens layout spacing for users who want it, while leaving the default layout intact for everyone else. No promises on timeline or whether it will happen, but I won't dismiss it outright if it becomes a common request.

Thank you for the thoughtful feedback — it genuinely helps to have users who care enough to describe problems this precisely, even when the answer is "not right now."

[BobWs]

Hi @gun666vald, I wanted to follow up on this one with good news.

After posting my initial response explaining why I was hesitant, I decided to actually test the spacing change visually before closing the door on it — and I'm glad I did. I reduced the navbar bottom margin from md:mb-12 to md:mb-2 and also tightened the outer shell top padding in App.vue slightly. The result looks genuinely better across the board.

I went through every page in the app — the note viewer, editor, Home, Search Results, Bookmarks, Templates, Attachments, Archive, Trash, and Settings — including the recently added Saved Searches feature which has a persistent search bar and note list at the top. Nothing feels cramped. In fact it feels more natural, bringing the navbar and the page content into a tighter, more cohesive relationship without losing the visual separation between them.

The total vertical space recovered at the top of the viewport is around 40px, which is meaningful particularly at higher browser zoom levels — which was exactly your concern.

This change will ship as part of the upcoming v1.10.0 release alongside the Saved Searches feature. It's a small but worthwhile improvement and your issue is what prompted me to actually go and test it properly, so thank you for pushing on it.

[gun666vald]

Hi @BobWs,

That is amazing news! Thank you so much for taking the time to actually test it out—I'm really glad the results turned out looking great across all the pages.

Saving about 40px of vertical space globally is a huge win, especially on smaller viewports and under browser zoom. It really brings the whole UI together cleanly.

I'm highly looking forward to the v1.10.0 release, and the new Saved Searches feature sounds like a great addition as well!

Thank you again for your open-mindedness and for keeping this project so clean, lightweight, and responsive to user feedback. Keep up the fantastic work!