Add percentage width utility classes

This also sets the Name column to the correct width.

app/assets/javascripts/admin/users/components/users_table.vue

@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 
 const DEFAULT_TH_CLASSES =
   'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
-const thWidthClass = width => `mw-${width} ${DEFAULT_TH_CLASSES}`;
+const thWidthClass = width => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
 
 export default {
   components: {
@@ -24,7 +24,7 @@ export default {
     {
       key: 'name',
       label: __('Name'),
-      thClass: thWidthClass(20),
+      thClass: thWidthClass(40),
     },
     {
       key: 'projectsCount',

app/assets/stylesheets/utilities.scss

@@ -143,3 +143,16 @@
     flex-direction: column !important;
   }
 }
+
+// These will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1091
+.gl-w-10p {
+  width: 10%;
+}
+
+.gl-w-20p {
+  width: 20%;
+}
+
+.gl-w-40p {
+  width: 40%;
+}