fix(NcSettingsSection): clear NcAppNavigation toggle overhang

[pringelmann]

Resolves

The NcAppNavigationToggle button overlaps the first NcSettingsSection heading on Nextcloud settings pages. This PR widen the section's inline-start margin so the heading clears the toggle. Falls back to the existing margin when used without an app navigation.

A companion server PR covers the legacy markup and Vue 2 line.

Fix

Widen the inline-start margin using max(). With an NcAppNavigation present, the formula evaluates to ~60 px and clears the toggle. Embedded without a nav, the max() falls back to the existing 28 px and the layout is unchanged.

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Check with design if growing left gutter is OK

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.60%. Comparing base (26d6db4) to head (d40e003).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8554   +/-   ##
=======================================
  Coverage   54.60%   54.60%           
=======================================
  Files         106      106           
  Lines        3443     3443           
  Branches     1004     1005    +1     
=======================================
  Hits         1880     1880           
  Misses       1322     1322           
  Partials      241      241           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[susnux]

I personally dislike this design wise it looks off to me that there is so much weird spacing on the left.

Why not just add some inline margin to the header?
So that on page load you can fully see the header and also the button (prevent overflow).
But when scrolling I think its ok for the toggle to overflow the content.
This also gets really cramped on small mobile (keep in mind we have to support 300px screen width).

Besides that its also because then we have 3 different "content" types:

• left aligned
• centered
• left aligned with margin

What I meant with adjusting the header is like this:

similar like we do it in apps.

[susnux]

If we want this then this at least looks a bit uneven to me, most apps I know handle it with:

Suggested change

	calc(var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline) * 2)
	calc(2 * var(--app-navigation-padding) + var(--default-clickable-area))

[pringelmann]

I personally dislike this design wise it looks off to me that there is so much weird spacing on the left.

Why not just add some inline margin to the header? So that on page load you can fully see the header and also the button (prevent overflow). But when scrolling I think its ok for the toggle to overflow the content. This also gets really cramped on small mobile (keep in mind we have to support 300px screen width).

Besides that its also because then we have 3 different "content" types:

* left aligned

* centered

* left aligned with margin

What I meant with adjusting the header is like this:

similar like we do it in apps.

That's how I solved it initially, but decided it looks quite bad having the button overlap content on scroll. Sticky headers or banners make sense but a random floating button looks like a bug to me. But fair point about the margin: it does look strange and wastes space. I can change it to header-only and push that to my preview env so we can check it across different pages.

[kra-mo]

I do think overlapping generally is undesirable, so how about this:

Remove the button's background and hover colors, and then we have more leeway with margins.

We still need to make it look OK when focused, but we could special case that by making it circular for example:

Not a great long-term solution, but longer term, we talked about having floating toolbars in general, which this would be a part of. For the short term, this should be an easy fix… if you think it makes sense?

[kra-mo]

And actually, if it's smaller and circular, the hover/bg color could also stay.

[kra-mo]

Ok, on second thought, my suggestion is kind of stupid. We discussed this with the other designers, I think the best option is to just have a proper toolbar component for overlapping controls in general.

[kra-mo]

Until then though, we could just either add padding to the top or do what @susnux suggested.

[pringelmann]

Thanks for all the feedback. I will go with the overlapping content solution for now. While not great, its definitely better than a huge margin on the left

[kra-mo]

Proactive approval from design unless something changes :)

[pringelmann]

Opted to add padding to all settings pages instead. Much simpler and only requires one PR: nextcloud/server#60596

Closing this