Fix padding on CI settings tables in mobile version

To make the table more compact in larger screens some extra padding was
removed, however this removed all space in the mobile version as well.

This change fixes that, by restoring the padding and aligning the row
actions to the right.

app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue

@@ -46,6 +46,7 @@ export default {
     {
       key: 'actions',
       label: '',
+      tdClass: 'text-right',
       customStyle: { width: '35px' },
     },
   ],

app/assets/stylesheets/pages/settings.scss

@@ -384,6 +384,13 @@
         font-weight: $gl-font-weight-bold;
         border: 0;
       }
+
+      // When tables are "stacked", restore td padding
+      @media(max-width: map-get($grid-breakpoints, lg)) {
+        td {
+          padding-left: $gl-spacing-scale-5;
+        }
+      }
     }
   }
 

changelogs/unreleased/213351-address-mobile-issues-for-ci-variable-table.yml

+---
+title: Fix padding on CI settings tables in mobile version
+merge_request: 41728
+author:
+type: fixed