Improve scrollable-tabs styling

src/api/app/assets/stylesheets/webui/tabs.scss

@@ -5,6 +5,7 @@
   overflow: auto;
   white-space: nowrap;
   padding: 0.5rem 1rem 0rem 1rem;
+  margin-bottom: -1px; // border-width
 
   a.scrollable-tab-link {
     display: inline-block;
@@ -24,6 +25,7 @@
 ul.scrollable-tabs {
   display: block;
   overflow-y: hidden;
+  margin-bottom: -1px;
 
   li.scrollable-tab-link {
     display: inline-block;

src/api/app/views/webui/configuration/_tabs.html.haml

@@ -1,7 +1,8 @@
-.bg-light.scrollable-tabs
-  = tab_link('Configuration', configuration_path, false, 'scrollable-tab-link')
-  = tab_link('Architectures', architectures_path, false, 'scrollable-tab-link')
-  = tab_link('Manage Users', users_path, false, 'scrollable-tab-link')
-  = tab_link('Manage Groups', groups_path, false, 'scrollable-tab-link')
-  = tab_link('Notifications', notifications_path, false, 'scrollable-tab-link')
-  = tab_link('Interconnect', new_interconnect_path, false, 'scrollable-tab-link')
+.card-header.p-0.border-bottom
+  .scrollable-tabs
+    = tab_link('Configuration', configuration_path, false, 'scrollable-tab-link')
+    = tab_link('Architectures', architectures_path, false, 'scrollable-tab-link')
+    = tab_link('Manage Users', users_path, false, 'scrollable-tab-link')
+    = tab_link('Manage Groups', groups_path, false, 'scrollable-tab-link')
+    = tab_link('Notifications', notifications_path, false, 'scrollable-tab-link')
+    = tab_link('Interconnect', new_interconnect_path, false, 'scrollable-tab-link')

src/api/app/views/webui/package/_tabs.html.haml

@@ -1,13 +1,14 @@
-.bg-light.scrollable-tabs
-  = tab_link('Overview', package_show_path(project, package), false, 'scrollable-tab-link')
-  - if package.name == 'patchinfo'
-    = tab_link('Details', show_patchinfo_path(project, package), false, 'scrollable-tab-link')
-  -# haml-lint:disable InstanceVariables
-  - unless @spider_bot
-    -# haml-lint:enable InstanceVariables
-    = tab_link('Repositories', repositories_path(project, package), false, 'scrollable-tab-link')
-    = tab_link('Revisions', package_view_revisions_path(project, package), false, 'scrollable-tab-link')
-    = tab_link('Requests', package_requests_path(project, package), false, 'scrollable-tab-link')
-    = tab_link('Users', package_users_path(project, package), false, 'scrollable-tab-link')
-    = tab_link('Attributes', index_attribs_path(project, package), false, 'scrollable-tab-link')
-    = tab_link('Meta', package_meta_path(project, package), false, 'scrollable-tab-link')
+.card-header.p-0.border-bottom
+  .scrollable-tabs
+    = tab_link('Overview', package_show_path(project, package), false, 'scrollable-tab-link')
+    - if package.name == 'patchinfo'
+      = tab_link('Details', show_patchinfo_path(project, package), false, 'scrollable-tab-link')
+    -# haml-lint:disable InstanceVariables
+    - unless @spider_bot
+      -# haml-lint:enable InstanceVariables
+      = tab_link('Repositories', repositories_path(project, package), false, 'scrollable-tab-link')
+      = tab_link('Revisions', package_view_revisions_path(project, package), false, 'scrollable-tab-link')
+      = tab_link('Requests', package_requests_path(project, package), false, 'scrollable-tab-link')
+      = tab_link('Users', package_users_path(project, package), false, 'scrollable-tab-link')
+      = tab_link('Attributes', index_attribs_path(project, package), false, 'scrollable-tab-link')
+      = tab_link('Meta', package_meta_path(project, package), false, 'scrollable-tab-link')

src/api/app/views/webui/project/_tabs.html.haml

@@ -1,29 +1,30 @@
-.bg-light.scrollable-tabs
-  = tab_link('Overview', [project_show_path(project), keys_and_certificates_path(project)], false, 'scrollable-tab-link')
-  -# haml-lint:disable InstanceVariables
-  - unless @spider_bot
-    -# haml-lint:enable InstanceVariables
-    - if project.is_maintenance?
-      = tab_link('Incidents', project_maintenance_incidents_path(project), false, 'scrollable-tab-link')
-      = tab_link('Maintained Projects', project_maintained_projects_path(project), false, 'scrollable-tab-link')
-    - unless project.defines_remote_instance? || project.is_maintenance?
-      = tab_link('Repositories', repositories_path(project), false, 'scrollable-tab-link')
-      = tab_link('Monitor', project_monitor_path(project), false, 'scrollable-tab-link')
-    = tab_link('Requests', project_requests_path(project), false, 'scrollable-tab-link')
-    - unless project.defines_remote_instance?
-      = tab_link('Users', project_users_path(project), false, 'scrollable-tab-link')
-    - unless project.defines_remote_instance? || project.is_maintenance?
-      = tab_link('Subprojects', project_subprojects_path(project), false, 'scrollable-tab-link')
-      = tab_link('Project Config', project_config_path(project), false, 'scrollable-tab-link')
-    = tab_link('Attributes', [index_attribs_path(project)], controller_name == 'attribute', 'scrollable-tab-link')
-    = tab_link('Meta', project_meta_path(project), false, 'scrollable-tab-link')
-    - unless project.defines_remote_instance? || project.is_maintenance?
-      = tab_link('Status', project_status_path(project), false, 'scrollable-tab-link')
-    = tab_link('Pulse', project_pulse_path(project), false, 'scrollable-tab-link')
-    - active = controller_path.starts_with?('webui/staging')
-    - if project.staging_project?
-      = tab_link('Staging', staging_workflow_path(project.staging_workflow.project), false, 'scrollable-tab-link')
-    - elsif project.staging&.persisted?
-      = tab_link('Staging', staging_workflow_path(project), active, 'scrollable-tab-link')
-    - elsif Staging::WorkflowPolicy.new(pundit_user, Staging::Workflow.new(project: project), ensure_logged_in: false).create?
-      = tab_link('Staging', new_staging_workflow_path(project: project), active, 'scrollable-tab-link')
+.card-header.p-0.border-bottom
+  .scrollable-tabs
+    = tab_link('Overview', [project_show_path(project), keys_and_certificates_path(project)], false, 'scrollable-tab-link')
+    -# haml-lint:disable InstanceVariables
+    - unless @spider_bot
+      -# haml-lint:enable InstanceVariables
+      - if project.is_maintenance?
+        = tab_link('Incidents', project_maintenance_incidents_path(project), false, 'scrollable-tab-link')
+        = tab_link('Maintained Projects', project_maintained_projects_path(project), false, 'scrollable-tab-link')
+      - unless project.defines_remote_instance? || project.is_maintenance?
+        = tab_link('Repositories', repositories_path(project), false, 'scrollable-tab-link')
+        = tab_link('Monitor', project_monitor_path(project), false, 'scrollable-tab-link')
+      = tab_link('Requests', project_requests_path(project), false, 'scrollable-tab-link')
+      - unless project.defines_remote_instance?
+        = tab_link('Users', project_users_path(project), false, 'scrollable-tab-link')
+      - unless project.defines_remote_instance? || project.is_maintenance?
+        = tab_link('Subprojects', project_subprojects_path(project), false, 'scrollable-tab-link')
+        = tab_link('Project Config', project_config_path(project), false, 'scrollable-tab-link')
+      = tab_link('Attributes', [index_attribs_path(project)], controller_name == 'attribute', 'scrollable-tab-link')
+      = tab_link('Meta', project_meta_path(project), false, 'scrollable-tab-link')
+      - unless project.defines_remote_instance? || project.is_maintenance?
+        = tab_link('Status', project_status_path(project), false, 'scrollable-tab-link')
+      = tab_link('Pulse', project_pulse_path(project), false, 'scrollable-tab-link')
+      - active = controller_path.starts_with?('webui/staging')
+      - if project.staging_project?
+        = tab_link('Staging', staging_workflow_path(project.staging_workflow.project), false, 'scrollable-tab-link')
+      - elsif project.staging&.persisted?
+        = tab_link('Staging', staging_workflow_path(project), active, 'scrollable-tab-link')
+      - elsif Staging::WorkflowPolicy.new(pundit_user, Staging::Workflow.new(project: project), ensure_logged_in: false).create?
+        = tab_link('Staging', new_staging_workflow_path(project: project), active, 'scrollable-tab-link')

src/api/app/views/webui/request/beta_show.html.haml

@@ -49,27 +49,28 @@
         = render partial: 'actions_details', locals: { bs_request: @bs_request, action: @action, active_action: @active_action,
                                                        diff_to_superseded_id: @diff_to_superseded_id, diff_limit: @diff_limit }
 
-    %ul.nav.nav-tabs.scrollable-tabs#request-tabs{ role: 'tablist' }
-      %li.nav-item.scrollable-tab-link{ role: 'presentation' }
-        = link_to('Conversation', '#conversation', class: 'nav-link text-nowrap', 'aria-controls': 'conversation',
-                  'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
-      - if @action[:sprj] || @action[:spkg]
-        %li.nav-item.scrollable-tab-link{ role: 'presentation' }
-          = link_to('Build Results', '#build-results', class: 'nav-link text-nowrap', 'aria-controls': 'build-results',
-                    'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
+    .border-bottom
+      %ul.nav.nav-tabs.scrollable-tabs.border-0#request-tabs{ role: 'tablist' }
         %li.nav-item.scrollable-tab-link{ role: 'presentation' }
-          = link_to('RPM Lint', '#rpm-lint', class: 'nav-link text-nowrap', 'aria-controls': 'rpm-lint',
+          = link_to('Conversation', '#conversation', class: 'nav-link text-nowrap', 'aria-controls': 'conversation',
                     'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
-      - if @action[:type].in?(actions_for_diff)
-        %li.nav-item.scrollable-tab-link{ role: 'presentation', 'data-request-number': @bs_request.number, 'data-request-action-id': @action[:id] }
-          = link_to('Changes', '#changes', class: 'nav-link text-nowrap', 'aria-controls': 'changes',
-                    'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
-      - if @action[:type].in?(actions_for_diff)
-        %li.nav-item.scrollable-tab-link{ role: 'presentation' }
-          = link_to('#mentioned-issues', class: 'nav-link text-nowrap', 'aria-controls': 'mentioned-issues',
-                    'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab') do
-            Mentioned Issues
-            %span.badge.badge-primary.align-text-top= @issues.size
+        - if @action[:sprj] || @action[:spkg]
+          %li.nav-item.scrollable-tab-link{ role: 'presentation' }
+            = link_to('Build Results', '#build-results', class: 'nav-link text-nowrap', 'aria-controls': 'build-results',
+                      'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
+          %li.nav-item.scrollable-tab-link{ role: 'presentation' }
+            = link_to('RPM Lint', '#rpm-lint', class: 'nav-link text-nowrap', 'aria-controls': 'rpm-lint',
+                      'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
+        - if @action[:type].in?(actions_for_diff)
+          %li.nav-item.scrollable-tab-link{ role: 'presentation', 'data-request-number': @bs_request.number, 'data-request-action-id': @action[:id] }
+            = link_to('Changes', '#changes', class: 'nav-link text-nowrap', 'aria-controls': 'changes',
+                      'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab')
+        - if @action[:type].in?(actions_for_diff)
+          %li.nav-item.scrollable-tab-link{ role: 'presentation' }
+            = link_to('#mentioned-issues', class: 'nav-link text-nowrap', 'aria-controls': 'mentioned-issues',
+                      'aria-selected': 'false', 'data-toggle': 'tab', role: 'tab') do
+              Mentioned Issues
+              %span.badge.badge-primary.align-text-top= @issues.size
     .tab-content.p-4#request-tabs-content
       .tab-pane.fade.p-2#conversation{ 'aria-labelledby': 'conversation-tab', role: 'tabpanel' }
         = render partial: 'webui/request/beta_show_tabs/conversation',