diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_details.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_details.vue
index 41fb2527036311c87cfe85654df48f07773c89cd..bcc0ddf824a9aaa5dfa0de3ee82e83a6d4c745c8 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_details.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_details.vue
@@ -50,7 +50,7 @@ export default {
 <template>
   <ul class="gl-list-style-none">
     <workload-details-item :label="$options.i18n.name">
-      {{ item.name }}
+      <span class="gl-word-break-word"> {{ item.name }}</span>
     </workload-details-item>
     <workload-details-item :label="$options.i18n.kind">
       {{ item.kind }}
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue
index 8b1436b54863b0b86f69730e9d2baf6a2145c497..6579e0229e65e479767d2d1f596210ee8cd5634f 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon, GlAlert, GlDrawer } from '@gitlab/ui';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 import WorkloadStats from './workload_stats.vue';
 import WorkloadTable from './workload_table.vue';
 import WorkloadDetails from './workload_details.vue';
@@ -36,7 +37,7 @@ export default {
     fields: {
       type: Array,
       required: false,
-      default: null,
+      default: undefined,
     },
   },
   data() {
@@ -45,6 +46,11 @@ export default {
       selectedItem: {},
     };
   },
+  computed: {
+    getDrawerHeaderHeight() {
+      return getContentWrapperHeight();
+    },
+  },
   methods: {
     closeDetailsDrawer() {
       this.showDetailsDrawer = false;
@@ -68,12 +74,14 @@ export default {
 
     <gl-drawer
       :open="showDetailsDrawer"
-      header-height="calc(var(--top-bar-height) + var(--performance-bar-height))"
+      :header-height="getDrawerHeaderHeight"
       :z-index="$options.DRAWER_Z_INDEX"
       @close="closeDetailsDrawer"
     >
       <template #title>
-        <h4 class="gl-font-weight-bold gl-font-size-h2 gl-m-0">{{ selectedItem.name }}</h4>
+        <h4 class="gl-font-weight-bold gl-font-size-h2 gl-m-0 gl-word-break-word">
+          {{ selectedItem.name }}
+        </h4>
       </template>
       <template #default>
         <workload-details :item="selectedItem" />
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue
index d3704863538e40396b0235fd56c85e16023322d5..83940fb91c80283b3e4d410248ad11e79a0abb0c 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlTable, GlBadge, GlPagination } from '@gitlab/ui';
+import { __ } from '~/locale';
 import {
   WORKLOAD_STATUS_BADGE_VARIANTS,
   PAGE_SIZE,
-  TABLE_HEADING_CLASSES,
   DEFAULT_WORKLOAD_TABLE_FIELDS,
 } from '../constants';
 
@@ -34,7 +34,6 @@ export default {
       return this.fields.map((field) => {
         return {
           ...field,
-          thClass: TABLE_HEADING_CLASSES,
           sortable: true,
         };
       });
@@ -45,6 +44,9 @@ export default {
       this.$emit('select-item', item);
     },
   },
+  i18n: {
+    emptyText: __('No results found'),
+  },
   PAGE_SIZE,
   WORKLOAD_STATUS_BADGE_VARIANTS,
   TABLE_CELL_CLASSES: 'gl-p-2',
@@ -58,9 +60,10 @@ export default {
       :fields="tableFields"
       :per-page="$options.PAGE_SIZE"
       :current-page="currentPage"
+      :empty-text="$options.i18n.emptyText"
       tbody-tr-class="gl-hover-cursor-pointer"
+      show-empty
       stacked="md"
-      bordered
       hover
       @row-clicked="selectItem"
     >
diff --git a/app/assets/javascripts/kubernetes_dashboard/constants.js b/app/assets/javascripts/kubernetes_dashboard/constants.js
index 0696fcab875188a3f94ec1e441c825b27596298b..458a79cbcb6ffca31a871f2ae3b0a09fecfe23cf 100644
--- a/app/assets/javascripts/kubernetes_dashboard/constants.js
+++ b/app/assets/javascripts/kubernetes_dashboard/constants.js
@@ -30,20 +30,21 @@ export const WORKLOAD_STATUS_BADGE_VARIANTS = {
 
 export const PAGE_SIZE = 20;
 
-export const TABLE_HEADING_CLASSES = 'gl-bg-gray-50! gl-font-weight-bold gl-white-space-nowrap';
-
 export const DEFAULT_WORKLOAD_TABLE_FIELDS = [
   {
     key: 'name',
     label: s__('KubernetesDashboard|Name'),
+    tdClass: 'gl-md-w-half gl-lg-w-40p gl-word-break-word',
   },
   {
     key: 'status',
     label: s__('KubernetesDashboard|Status'),
+    tdClass: 'gl-md-w-15',
   },
   {
     key: 'namespace',
     label: s__('KubernetesDashboard|Namespace'),
+    tdClass: 'gl-md-w-30p gl-lg-w-40p gl-word-break-word',
   },
   {
     key: 'age',
diff --git a/spec/frontend/kubernetes_dashboard/components/workload_table_spec.js b/spec/frontend/kubernetes_dashboard/components/workload_table_spec.js
index 369b8f32c2df6fc4a708dafd37ef5cc3e70afc14..e873da07a2a849e1286b1b85862c93c380486b80 100644
--- a/spec/frontend/kubernetes_dashboard/components/workload_table_spec.js
+++ b/spec/frontend/kubernetes_dashboard/components/workload_table_spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { GlTable, GlBadge, GlPagination } from '@gitlab/ui';
 import WorkloadTable from '~/kubernetes_dashboard/components/workload_table.vue';
-import { TABLE_HEADING_CLASSES, PAGE_SIZE } from '~/kubernetes_dashboard/constants';
+import { PAGE_SIZE } from '~/kubernetes_dashboard/constants';
 import { mockPodsTableItems } from '../graphql/mock_data';
 
 let wrapper;
@@ -26,25 +26,24 @@ describe('Workload table component', () => {
       {
         key: 'name',
         label: 'Name',
-        thClass: TABLE_HEADING_CLASSES,
         sortable: true,
+        tdClass: 'gl-md-w-half gl-lg-w-40p gl-word-break-word',
       },
       {
         key: 'status',
         label: 'Status',
-        thClass: TABLE_HEADING_CLASSES,
         sortable: true,
+        tdClass: 'gl-md-w-15',
       },
       {
         key: 'namespace',
         label: 'Namespace',
-        thClass: TABLE_HEADING_CLASSES,
         sortable: true,
+        tdClass: 'gl-md-w-30p gl-lg-w-40p gl-word-break-word',
       },
       {
         key: 'age',
         label: 'Age',
-        thClass: TABLE_HEADING_CLASSES,
         sortable: true,
       },
     ];
@@ -57,13 +56,11 @@ describe('Workload table component', () => {
       {
         key: 'field-1',
         label: 'Field-1',
-        thClass: TABLE_HEADING_CLASSES,
         sortable: true,
       },
       {
         key: 'field-2',
         label: 'Field-2',
-        thClass: TABLE_HEADING_CLASSES,
         sortable: true,
       },
     ];