Secondary navbars are overflowed on mobile
Summary
Secondary navbar is overflowed, for example, on group top.
Steps to reproduce
- Visit https://gitlab.com/gitlab-org on mobile to see this bug.
What is the current bug behavior?
Secondary navbar inlcuding "Subgroups and projects", "Shared projects", "Archived projects" is overflowed on mobile (or narrow window ca. 480px or narrower).
What is the expected correct behavior?
Secondary navbar inlcuding "Subgroups and projects", "Shared projects", "Archived projects" can be scrolled.
Definition of done
-
$ git grep scrolling-tabs-container | wc -l
returns0
.
Relevant logs and/or screenshots
The below is an example:
$ git grep scrolling-tabs-container
app/assets/javascripts/deploy_keys/components/app.vue: <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue: class="top-area scrolling-tabs-container inner-page-scroll-tabs gl-border-none"
app/assets/stylesheets/framework/secondary_navigation_elements.scss:.scrolling-tabs-container {
app/assets/stylesheets/page_bundles/project.scss: .scrolling-tabs-container {
app/views/admin/application_settings/_ci_cd.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs
app/views/admin/application_settings/_package_registry.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs
app/views/admin/jobs/index.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
app/views/admin/projects/index.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
app/views/admin/users/_users.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
app/views/dashboard/_projects_head.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
app/views/explore/topics/_head.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
app/views/groups/show.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs
app/views/projects/merge_requests/creations/_new_submit.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
app/views/search/_category.html.haml:.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
app/views/shared/_event_filter.html.haml:.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller.flex-fill
app/views/shared/milestones/_tabs.html.haml:.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
app/views/users/show.html.haml: .scrolling-tabs-container
ee/app/views/shared/credentials_inventory/index.html.haml: .scrolling-tabs-container.inner-page-scroll-tabs.gl-flex-grow-1.gl-min-w-0.gl-w-full
Output of checks
This bug happens on GitLab.com.
Possible fixes
.scrolling-tabs-container
should have width: 100%
.
Edited by Takuya Noguchi