Merge branch '36652-follow-up-from-finalise-vue-packages-list-app' into 'master'

Resolve "Follow-up from "Finalise vue packages list app""

Closes #36652

See merge request gitlab-org/gitlab!21490

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,66 +106,81 @@ exports[`packages_list renders 1`] = `
         <td
           aria-colindex="1"
           class="text-left"
+          data-label="Name"
           role="cell"
         >
-          <div
-            class="flex-truncate-parent"
-          >
-            <a
-              class="flex-truncate-child"
-              data-qa-selector="package_link"
-              href="#"
+          <div>
+            <div
+              class="flex-truncate-parent"
             >
-              
+              <a
+                class="flex-truncate-child"
+                data-qa-selector="package_link"
+                href="#"
+              >
+                
             Test package
           
-            </a>
+              </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"
         >
-          <timeagotooltip-stub
-            cssclass=""
-            time=""
-            tooltipplacement="top"
-          />
+          <div>
+            <timeagotooltip-stub
+              cssclass=""
+              time=""
+              tooltipplacement="top"
+            />
+          </div>
         </td>
         <td
           aria-colindex="5"
           class="text-right"
+          data-label=""
           role="cell"
         >
-          <glbutton-stub
-            aria-label="Remove package"
-            title="Remove package"
-            variant="danger"
-          >
-            <icon-stub
-              name="remove"
-              size="16"
-            />
-          </glbutton-stub>
+          <div>
+            <glbutton-stub
+              aria-label="Remove package"
+              title="Remove package"
+              variant="danger"
+            >
+              <icon-stub
+                name="remove"
+                size="16"
+              />
+            </glbutton-stub>
+          </div>
         </td>
       </tr>
       <tr
@@ -173,66 +190,81 @@ exports[`packages_list renders 1`] = `
         <td
           aria-colindex="1"
           class="text-left"
+          data-label="Name"
           role="cell"
         >
-          <div
-            class="flex-truncate-parent"
-          >
-            <a
-              class="flex-truncate-child"
-              data-qa-selector="package_link"
-              href="#"
+          <div>
+            <div
+              class="flex-truncate-parent"
             >
-              
+              <a
+                class="flex-truncate-child"
+                data-qa-selector="package_link"
+                href="#"
+              >
+                
             @Test/package
           
-            </a>
+              </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"
         >
-          <timeagotooltip-stub
-            cssclass=""
-            time=""
-            tooltipplacement="top"
-          />
+          <div>
+            <timeagotooltip-stub
+              cssclass=""
+              time=""
+              tooltipplacement="top"
+            />
+          </div>
         </td>
         <td
           aria-colindex="5"
           class="text-right"
+          data-label=""
           role="cell"
         >
-          <glbutton-stub
-            aria-label="Remove package"
-            title="Remove package"
-            variant="danger"
-          >
-            <icon-stub
-              name="remove"
-              size="16"
-            />
-          </glbutton-stub>
+          <div>
+            <glbutton-stub
+              aria-label="Remove package"
+              title="Remove package"
+              variant="danger"
+            >
+              <icon-stub
+                name="remove"
+                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');
+    });
+  });
 });