-
-
Notifications
You must be signed in to change notification settings - Fork 227
Description
Description :
When a blueprint has many tabs (10+), the horizontal tab bar overflows and becomes unusable — tabs wrap or get cut off.
Proposed solution :
Add a CSS class side-tabs (already partially defined in template.css) to the .form-tabs wrapper when the tab count exceeds a configurable threshold, switching to a vertical left-side navigation.
Current state :
The class .form-tabs.side-tabs already exists in css-compiled/template.css with a basic flex layout, but it is never automatically applied based on tab count, and its styles are incomplete for a usable vertical nav.
Workaround currently used :
Injecting CSS via whitelabel.custom_css in user/localhost/config/plugins/admin.yaml :
css
.form-tabs { display: flex !important; align-items: flex-start !important; height: calc(100vh - 180px) !important; }
.admin-pages .form-tabs .tabs-nav { margin-right: 0 !important; }
.form-tabs .tabs-nav a { min-height: 0 !important; flex: none !important; }
.form-tabs > .tabs-nav {
flex-direction: column !important;
flex: 0 0 180px !important;
height: 100% !important;
overflow-y: auto !important;
border-right: 2px solid rgba(0,0,0,0.10) !important;
background: transparent !important;
}
.form-tabs > .tabs-nav a.tab__link {
display: flex !important;
justify-content: flex-end !important;
text-align: right !important;
min-height: 4vh !important;
font-size: clamp(0.72rem, 1.1vw, 0.88rem) !important;
border-left: 3px solid transparent !important;
border-bottom: none !important;
}
.form-tabs > .tabs-nav a.tab__link.active {
border-left-color: var(--color-a) !important;
font-weight: 600 !important;
}
.form-tabs > .tabs-content { flex: 1 !important; height: 100% !important; overflow-y: auto !important; }
Request :
Either expose a blueprint-level option like tabs_layout: vertical or auto-apply .side-tabs when tab count > N (e.g. 6), and complete the existing .side-tabs CSS to cover scroll, sticky nav, and proportional sizing.
Grav Admin version : tested on current
Context : Blueprint with 10+ tabs (content, lineup, links, videos, discography, photos, press, pro docs, SEO, security)