Update gl-table to use stacked on sm breakpoint

- updated snapshots

ee/app/assets/javascripts/packages/list/components/packages_list.vue

@@ -176,6 +176,7 @@ export default {
         :items="list"
         :fields="headerFields"
         :no-local-sorting="true"
+        stacked="md"
       >
         <template #name="{value}">
           <div ref="col-name" class="flex-truncate-parent">

ee/app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -46,7 +46,7 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" />
+  <gl-loading-icon v-if="isLoading" class="mt-2" />
   <package-list v-else @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest">
     <template #empty-state>
       <gl-empty-state

ee/spec/frontend/packages/list/components/__snapshots__/packages_list_spec.js.snap

@@ -35,8 +35,10 @@ exports[`packages_list renders 1`] = `
   <table
     aria-busy="false"
     aria-colcount="5"
-    class="table b-table gl-table"
+    aria-describedby="__BVID__9__caption_"
+    class="table b-table gl-table b-table-stacked-md"
     id="__BVID__9"
+    role="table"
   >
     <!---->
     <!---->
@@ -104,8 +106,10 @@ exports[`packages_list renders 1`] = `
         <td
           aria-colindex="1"
           class="text-left"
+          data-label="Name"
           role="cell"
         >
+          <div>
             <div
               class="flex-truncate-parent"
             >
@@ -119,41 +123,53 @@ exports[`packages_list renders 1`] = `
           
               </a>
             </div>
+          </div>
         </td>
         <td
           aria-colindex="2"
           class="text-center"
+          data-label="Version"
           role="cell"
         >
+          <div>
             
         1.0.0
       
+          </div>
         </td>
         <td
           aria-colindex="3"
           class="text-center"
+          data-label="Type"
           role="cell"
         >
+          <div>
             
         maven
       
+          </div>
         </td>
         <td
           aria-colindex="4"
           class="text-center"
+          data-label="Created"
           role="cell"
         >
+          <div>
             <timeagotooltip-stub
               cssclass=""
               time=""
               tooltipplacement="top"
             />
+          </div>
         </td>
         <td
           aria-colindex="5"
           class="text-right"
+          data-label=""
           role="cell"
         >
+          <div>
             <glbutton-stub
               aria-label="Remove package"
               title="Remove package"
@@ -164,6 +180,7 @@ exports[`packages_list renders 1`] = `
                 size="16"
               />
             </glbutton-stub>
+          </div>
         </td>
       </tr>
       <tr
@@ -173,8 +190,10 @@ exports[`packages_list renders 1`] = `
         <td
           aria-colindex="1"
           class="text-left"
+          data-label="Name"
           role="cell"
         >
+          <div>
             <div
               class="flex-truncate-parent"
             >
@@ -188,41 +207,53 @@ exports[`packages_list renders 1`] = `
           
               </a>
             </div>
+          </div>
         </td>
         <td
           aria-colindex="2"
           class="text-center"
+          data-label="Version"
           role="cell"
         >
+          <div>
             
         
       
+          </div>
         </td>
         <td
           aria-colindex="3"
           class="text-center"
+          data-label="Type"
           role="cell"
         >
+          <div>
             
         npm
       
+          </div>
         </td>
         <td
           aria-colindex="4"
           class="text-center"
+          data-label="Created"
           role="cell"
         >
+          <div>
             <timeagotooltip-stub
               cssclass=""
               time=""
               tooltipplacement="top"
             />
+          </div>
         </td>
         <td
           aria-colindex="5"
           class="text-right"
+          data-label=""
           role="cell"
         >
+          <div>
             <glbutton-stub
               aria-label="Remove package"
               title="Remove package"
@@ -233,6 +264,7 @@ exports[`packages_list renders 1`] = `
                 size="16"
               />
             </glbutton-stub>
+          </div>
         </td>
       </tr>
       <!---->

ee/spec/frontend/packages/list/components/packages_list_spec.js

@@ -173,4 +173,11 @@ describe('packages_list', () => {
       expect(wrapper.emitted('page:changed')).toEqual([[2]]);
     });
   });
+
+  describe('table component', () => {
+    it('has stacked-md class', () => {
+      const table = findPackageListTable();
+      expect(table.classes()).toContain('b-table-stacked-md');
+    });
+  });
 });