Uses responsive table for index page

Updates detail page header to overflow properly on mobile

ee/app/assets/stylesheets/pages/packages.scss

-.table-holder .packages-table {
-  tr {
-    th {
-      border-top: 0;
-      background: none;
-      padding: $gl-padding-top 0;
-    }
-
-    td {
-      padding: $gl-padding-top 0;
-    }
-  }
-}

ee/app/views/projects/packages/packages/index.html.haml

-- page_title "Packages"
+- page_title _("Packages")
 - can_destroy_package = can?(current_user, :destroy_package, @project)
 
 - if @packages.any?
   .table-holder
-    %table.table.packages-table
-      %thead
-        %tr
-          %th= _('Name')
-          %th= _('Version')
-          %th= _('Type')
-          %th= _('Created')
-          %th
-
-      %tbody
+    .gl-responsive-table-row.table-row-header{ role: 'row'}
+      .table-section.section-30{ role: 'rowheader'}
+        =_('Name')
+      .table-section.section-20{ role: 'rowheader'}
+        =_('Version')
+      .table-section.section-20{ role: 'rowheader'}
+        =_('Type')
+      .table-section.section-20{ role: 'rowheader'}
+        =_('Created')
+      .table-section.section-10{ role: 'rowheader'}
     - @packages.each do |package|
-          %tr
-            %td
+      .gl-responsive-table-row
+        .table-section.section-30
+          .table-mobile-header{ role: "rowheader" }= _("Name")
+          .table-mobile-content
             = link_to package.name, project_package_path(@project, package)
-            %td
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Version")
+          .table-mobile-content
             = package.version
-            %td
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Type")
+          .table-mobile-content
             = _('Maven package')
-            %td
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Created")
+          .table-mobile-content
             = time_ago_with_tooltip(package.created_at)
-            %td
+        .table-section.section-10
+          .table-mobile-header{ role: "rowheader" }
+          .table-mobile-content
             - if can_destroy_package
               .pull-right
                 = link_to project_package_path(@project, package), method: :delete, data: { confirm: _("Are you sure?") }, class: "btn btn-grouped btn-inverted btn-remove", title: _('Delete Package') do
                   = icon('trash')
-
     = paginate @packages, theme: "gitlab"
-
 - else
   .nothing-here-block
     = _('No packages stored for this project.')

ee/app/views/projects/packages/packages/show.html.haml

 - add_to_breadcrumbs _("Packages"), project_packages_path(@project)
 - add_to_breadcrumbs @package.name, project_packages_path(@project)
 - breadcrumb_title @package.version
-- page_title "Packages"
+- page_title _("Packages")
 
-.detail-page-header
-  .detail-page-header-body
+.detail-page-header.d-flex.justify-content-between
   %strong
     = @package.version
-  .detail-page-header-actions
+
   - if can?(current_user, :destroy_package, @project)
     = link_to project_package_path(@project, @package), method: :delete, data: { confirm: _("Are you sure?") }, class: "btn btn-grouped btn-inverted btn-remove", title: _('Delete Package') do
       = _('Delete')
 .row.prepend-top-default
-  .col-md-6
+  .col-sm-6
     .card
       .card-header
         %strong= _('Package information')
@@ -32,7 +31,7 @@
             = _('Created on')
           %span.pull-right
             = @package.created_at.to_s(:medium)
-  .col-md-6
+  .col-sm-6
     - if @maven_metadatum
       .card
         .card-header