fix: keep nav bar sticky at top (#943)

* fix: keep nav bar sticky at top

* fix: sticky on settings page

* fix: keep padding in settings page

* fix: make all settings page title sticky

* fix: make buttons sticky with title

* fix: set header bar min height

* fix: mobile responsive

* fix: reduce header bar
This commit is contained in:
Clayton
2026-02-10 16:37:42 -06:00
committed by GitHub
parent 8fcd2912cb
commit 17e2971603
12 changed files with 164 additions and 167 deletions

View File

@@ -6,25 +6,37 @@
<main class="grow flex h-full">
<div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
<div class="grow space-y-4 overflow-y-auto px-3 md:px-10 pt-2 md:py-4 pb-20 overscroll-contain [-webkit-overflow-scrolling:touch]">
<% if content_for?(:breadcrumbs) %>
<%= yield :breadcrumbs %>
<% else %>
<%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
<% end %>
<div class="grow flex flex-col overflow-y-auto overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch]">
<div class="sticky top-0 z-10 px-3 md:px-10 pt-1.5 md:pt-3 pb-3 bg-surface border-b border-tertiary shrink-0">
<% if content_for?(:breadcrumbs) %>
<%= yield :breadcrumbs %>
<% else %>
<%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
<% end %>
<% if content_for?(:page_title) %>
<h1 class="text-primary text-3xl md:text-xl font-medium">
<%= content_for :page_title %>
</h1>
<% end %>
<div class="flex items-center justify-between gap-4 mt-1.5 min-h-9">
<% if content_for?(:page_title) %>
<h1 class="text-primary text-xl font-medium">
<%= content_for :page_title %>
</h1>
<% else %>
<div></div>
<% end %>
<% if content_for?(:page_actions) %>
<div class="flex items-center gap-2 shrink-0">
<%= yield :page_actions %>
</div>
<% end %>
</div>
</div>
<%= yield %>
<%= settings_nav_footer_mobile %>
</div>
<div class="my-4">
<%= settings_nav_footer %>
<div class="grow space-y-4 px-3 md:px-10 pb-20 pt-4">
<%= yield %>
<%= settings_nav_footer_mobile %>
<div class="my-4">
<%= settings_nav_footer %>
</div>
</div>
</div>
</div>
</main>