From 284f42fc6776cecbcd5afb1ea530a1556d370a26 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 3 Sep 2025 18:51:57 +0300
Subject: [PATCH 1/4] Fixes failuire to click restore and add new folder
 buttons

---
 .../frontend/shared/styles/main.scss          |  5 -----
 .../shared/views/RecommendedResourceCard.vue  | 20 +++++++++++++++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.scss b/contentcuration/contentcuration/frontend/shared/styles/main.scss
index 8e3188950c..50000d3755 100644
--- a/contentcuration/contentcuration/frontend/shared/styles/main.scss
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.scss
@@ -52,11 +52,6 @@ body {
   .v-btn:focus-visible {
     outline: 2px solid var(--v-secondary-base) !important;
   }
-
-  > .v-dialog__content,
-  > .v-overlay {
-    z-index: 16 !important;
-  }
 }
 
 /* RTL-related rules */
diff --git a/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue b/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue
index 1b79969d9e..3412ec4a7e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue
@@ -39,15 +39,31 @@
       <KFixedGrid :numCols="2">
         <KFixedGridItem alignment="right">
           <KIconButton
+            ref="goToLocation"
             icon="openNewTab"
-            :tooltip="$tr('goToLocationTooltip')"
             @click.stop="goToLocation"
           />
+          <KTooltip
+            reference="goToLocation"
+            :refs="$refs"
+            appendToOverlay
+            :appearanceOverrides="{ zIndex: 202 }"
+          >
+            {{ $tr('goToLocationTooltip') }}
+          </KTooltip>
           <KIconButton
+            ref="markNotRelevant"
             icon="thumbDown"
-            :tooltip="$tr('markNotRelevantTooltip')"
             @click.stop="markNotRelevant"
           />
+          <KTooltip
+            reference="markNotRelevant"
+            :refs="$refs"
+            appendToOverlay
+            :appearanceOverrides="{ zIndex: 202 }"
+          >
+            {{ $tr('markNotRelevantTooltip') }}
+          </KTooltip>
         </KFixedGridItem>
       </KFixedGrid>
     </template>

From 903657a9e0d70c0375696aed5d5bcc0df2c5c23f Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Fri, 5 Sep 2025 20:29:15 +0300
Subject: [PATCH 2/4] Updates kds version

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 550f3afd3b..5a08477887 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.12",
-    "kolibri-design-system": "5.2.1",
+    "kolibri-design-system": "5.3.0",
     "lodash": "^4.17.21",
     "lowlight": "^3.3.0",
     "material-icons": "0.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9340d9bddc..7131ed1f80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: ^0.2.12
         version: 0.2.12
       kolibri-design-system:
-        specifier: 5.2.1
-        version: 5.2.1
+        specifier: 5.3.0
+        version: 5.3.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -4869,8 +4869,8 @@ packages:
   kolibri-design-system@5.0.1:
     resolution: {integrity: sha512-oz5gEFUj7NYZbrqr89gPjSfRFVuuilSqILA4bbWqLWwkI9ay/uVMdsh8cY2Xajhtzccjwqa1c/NxUETr5kMfHQ==}
 
-  kolibri-design-system@5.2.1:
-    resolution: {integrity: sha512-KGZmhnqTBSetkrqc71BzlvWEiH4Hi8FQjqy0pYzpxdnRjb4Xx9l5Bp6w7WnAECQm10pEfbxUcfTBXUic0ecFmQ==}
+  kolibri-design-system@5.3.0:
+    resolution: {integrity: sha512-vqlqNaI200yWZOq6gwADZf79e+7Hq3wKz7l2idwNLt6UsihT/dRlodBN68aU4w5Wq3zqK/9bctnDLCcXVJx/rw==}
 
   kolibri-format@1.0.1:
     resolution: {integrity: sha512-yGQpsJkBAzmRueAq6MG1UOuDl9pbhEtMWNxq9ObG5pPVkG8uhWJAS1L71GCuNAeaV1XG2IWo2565Ov4yXnudeA==}
@@ -13140,7 +13140,7 @@ snapshots:
       vue2-teleport: 1.1.4
       xstate: 4.38.3
 
-  kolibri-design-system@5.2.1:
+  kolibri-design-system@5.3.0:
     dependencies:
       aphrodite: https://codeload.github.com/learningequality/aphrodite/tar.gz/fdc8d7be8912a5cf17f74ff10f124013c52c3e32
       autosize: 3.0.21

From 03efc5030f96e9208d3486a299e3bc7feb22be23 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Mon, 8 Sep 2025 14:38:07 +0300
Subject: [PATCH 3/4] fixed a11y  contrast issues with background color of
 feedback form error alert

---
 .../views/ImportFromChannels/SearchOrBrowseWindow.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
index e4548d91e6..bbdd145221 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue
@@ -219,7 +219,7 @@
         <p
           v-if="showFeedbackErrorMessage"
           class="feedback-form-error"
-          :style="{ color: $themeTokens.error, backgroundColor: $themePalette.red.v_100 }"
+          :style="{ color: $themeTokens.error, backgroundColor: $themePalette.pink.v_100 }"
         >
           <KLabeledIcon
             icon="error"

From e83ef5de33a8d789a26ea4e8f6ab58149a4b8897 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Fri, 12 Sep 2025 12:13:32 +0300
Subject: [PATCH 4/4] Removes FullscreenModal embedding in trash and move
 modals, and migrates them to use KModal

---
 .../channelEdit/components/move/MoveModal.vue |   2 +-
 .../components/move/NewTopicModal.vue         |  87 ++---
 .../move/__tests__/moveModal.spec.js          |   4 +
 .../move/__tests__/newTopicModal.spec.js      | 107 +++++--
 .../channelEdit/views/trash/TrashModal.vue    | 298 +++++++++---------
 .../views/trash/__tests__/trashModal.spec.js  |   4 +-
 .../frontend/shared/styles/main.scss          |   5 +
 .../shared/views/RecommendedResourceCard.vue  |  22 +-
 8 files changed, 268 insertions(+), 261 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
index 5ff2386397..be9d555a19 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue
@@ -179,9 +179,9 @@
 
     <NewTopicModal
       v-if="showNewTopicModal"
-      v-model="showNewTopicModal"
       data-test="newtopicmodal"
       @createTopic="createTopic"
+      @cancelCreateTopic="showNewTopicModal = false"
     />
   </FullscreenModal>
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
index 04c186adef..1db1853734 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue
@@ -1,84 +1,51 @@
 <template>
 
-  <MessageDialog
-    v-model="dialog"
-    :header="$tr('createTopic')"
+  <KModal
+    :title="$tr('createTopic')"
+    :cancelText="$tr('cancel')"
+    :submitText="$tr('create')"
+    data-test="newtopicmodal"
+    @cancel="cancel"
+    @submit="create"
   >
-    <VForm
-      ref="form"
-      lazy-validation
-      @submit.prevent="create"
-    >
-      <VTextField
-        v-model="title"
-        maxlength="200"
-        counter
-        :label="$tr('topicTitle')"
-        box
-        :rules="titleRules"
-        required
-      />
-    </VForm>
-    <template #buttons="{ close }">
-      <VBtn
-        flat
-        data-test="close"
-        @click="close"
-      >
-        {{ $tr('cancel') }}
-      </VBtn>
-      <VBtn
-        color="primary"
-        data-test="create"
-        @click="create"
-      >
-        {{ $tr('create') }}
-      </VBtn>
-    </template>
-  </MessageDialog>
+    <KTextbox
+      ref="title"
+      v-model="title"
+      :label="$tr('topicTitle')"
+      :maxlength="200"
+      :invalid="showErrorText"
+      :invalidText="titleError"
+      :showInvalidText="showErrorText"
+    />
+  </KModal>
 
 </template>
 
 
 <script>
 
-  import MessageDialog from 'shared/views/MessageDialog';
-
   export default {
     name: 'NewTopicModal',
-    components: {
-      MessageDialog,
-    },
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-    },
     data() {
       return {
         title: '',
+        titleError: null,
+        showErrorText: false,
       };
     },
-    computed: {
-      dialog: {
-        get() {
-          return this.value;
-        },
-        set(value) {
-          this.$emit('input', value);
-        },
-      },
-      titleRules() {
-        return [v => !!v || this.$tr('topicTitleRequired')];
-      },
-    },
     methods: {
       create() {
-        if (this.$refs.form.validate()) {
+        if (!this.title) {
+          this.titleError = this.$tr('topicTitleRequired');
+          this.showErrorText = true;
+          this.$refs.title.focus();
+        } else {
           this.$emit('createTopic', this.title);
         }
       },
+      cancel() {
+        this.$emit('cancelCreateTopic');
+      },
     },
     $trs: {
       topicTitle: 'Folder title',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/moveModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/moveModal.spec.js
index 378b0aa4e3..ffdf5778cd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/moveModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/moveModal.spec.js
@@ -50,6 +50,10 @@ function makeWrapper(selected) {
       Breadcrumbs: true,
       ResourceDrawer: true,
       OfflineText: true,
+      NewTopicModal: {
+        name: 'NewTopicModal',
+        template: '<div data-test="newtopicmodal"></div>',
+      },
     },
   });
 }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/newTopicModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/newTopicModal.spec.js
index ff9089d600..a45c161d73 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/newTopicModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/newTopicModal.spec.js
@@ -18,33 +18,88 @@ describe('newTopicModal', () => {
   beforeEach(() => {
     wrapper = makeWrapper();
   });
-  it('dialog should reflect v-model value', async () => {
-    expect(wrapper.vm.dialog).toBe(true);
-    wrapper.setProps({ value: false });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.dialog).toBe(false);
-  });
-  it('create button should validate form', async () => {
-    wrapper.find('[data-test="create"]').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent({ ref: 'form' }).vm.value).toBe(false);
+
+  it('renders correctly with default data', () => {
+    expect(wrapper.find('[data-test="newtopicmodal"]').exists()).toBe(true);
+    expect(wrapper.vm.title).toBe('');
+    expect(wrapper.vm.showErrorText).toBe(false);
+  });
+
+  it('displays modal with required props', () => {
+    const modal = wrapper.findComponent({ name: 'KModal' });
+    expect(modal.props('title')).toBeDefined();
+    expect(modal.props('title').length).toBeGreaterThan(0);
+    expect(modal.props('cancelText')).toBeDefined();
+    expect(modal.props('submitText')).toBeDefined();
+  });
+
+  it('updates title when user types in textbox', async () => {
+    const testInput = 'Test Topic';
+    const textbox = wrapper.findComponent({ name: 'KTextbox' });
+    await textbox.vm.$emit('input', testInput);
+    expect(wrapper.vm.title).toBe(testInput);
+  });
+
+  it('shows error state when creating topic with empty title', async () => {
+    wrapper.setData({ title: '' });
+    await wrapper.vm.create();
+    expect(wrapper.vm.titleError).toBeDefined();
+    expect(wrapper.vm.titleError.length).toBeGreaterThan(0);
+    expect(wrapper.vm.showErrorText).toBe(true);
+  });
+
+  it('emits createTopic event with provided title', async () => {
+    const testTitle = 'Valid Topic Title';
+    wrapper.setData({ title: testTitle });
+    await wrapper.vm.create();
+    expect(wrapper.emitted('createTopic')).toBeTruthy();
+    expect(wrapper.emitted('createTopic')[0]).toEqual([testTitle]);
+  });
+
+  it('does not emit createTopic event when title is empty', async () => {
+    wrapper.setData({ title: '' });
+    await wrapper.vm.create();
     expect(wrapper.emitted('createTopic')).toBeFalsy();
   });
-  it('create button should emit createTopic event if valid', async () => {
-    wrapper.setData({ title: 'test title' });
-    await wrapper.vm.$nextTick();
-    wrapper.findComponent('[data-test="create"]').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('createTopic')[0][0]).toBe('test title');
-  });
-  it('close button should emit input event with false value', async () => {
-    wrapper.findComponent('[data-test="close"]').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('input')[0][0]).toBe(false);
-  });
-  it('closing modal should clear title', async () => {
-    wrapper.findComponent('[data-test="close"]').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.title).toBe('');
+
+  it('emits cancelCreateTopic event when cancel is called', async () => {
+    await wrapper.vm.cancel();
+    expect(wrapper.emitted('cancelCreateTopic')).toBeTruthy();
+  });
+
+  it('focuses title input when validation fails', async () => {
+    const focusSpy = jest.spyOn(wrapper.vm.$refs.title, 'focus');
+    wrapper.setData({ title: '' });
+    await wrapper.vm.create();
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it('configures textbox with correct constraints', () => {
+    const textbox = wrapper.findComponent({ name: 'KTextbox' });
+    expect(textbox.props('label')).toBeDefined();
+    expect(textbox.props('maxlength')).toBe(200);
+  });
+
+  it('shows invalid state on textbox when error occurs', async () => {
+    const textbox = wrapper.findComponent({ name: 'KTextbox' });
+    wrapper.setData({ title: '' });
+    await wrapper.vm.create();
+    expect(textbox.props('invalid')).toBe(true);
+    expect(textbox.props('showInvalidText')).toBe(true);
+    expect(textbox.props('invalidText')).toBeDefined();
+  });
+
+  it('clears error state when valid title is provided', async () => {
+    // Invalid title
+    wrapper.setData({ title: '' });
+    await wrapper.vm.create();
+    expect(wrapper.vm.showErrorText).toBe(true);
+
+    // Valid title
+    const validTitle = 'Valid Title';
+    wrapper.setData({ title: validTitle });
+    await wrapper.vm.create();
+    expect(wrapper.emitted('createTopic')).toBeTruthy();
+    expect(wrapper.emitted('createTopic')[0]).toEqual([validTitle]);
   });
 });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index 00822ee76b..9052cf5720 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -1,181 +1,173 @@
 <template>
 
-  <FullscreenModal
-    v-model="dialog"
-    :header="$tr('trashModalTitle')"
-  >
-    <LoadingText
-      v-if="loading"
-      data-test="loading"
-    />
-    <VContainer
-      v-else-if="!items.length"
-      fluid
-      data-test="empty"
+  <div>
+    <FullscreenModal
+      v-if="!moveModalOpen"
+      v-model="dialog"
+      :header="$tr('trashModalTitle')"
     >
-      <h1 class="font-weight-bold headline mt-4 pt-4 text-xs-center">
-        {{ $tr('trashEmptyText') }}
-      </h1>
-      <p class="mt-3 subheading text-xs-center">
-        {{ $tr('trashEmptySubtext') }}
-      </p>
-    </VContainer>
-    <VContent v-else>
+      <LoadingText
+        v-if="loading"
+        data-test="loading"
+      />
       <VContainer
+        v-else-if="!items.length"
         fluid
-        class="pa-4"
-        data-test="list"
-        style="max-height: calc(100vh - 128px); overflow-y: auto"
+        data-test="empty"
       >
-        <VCard
-          style="width: 100%; max-width: 900px; margin: 0 auto"
-          flat
-          class="pa-2"
+        <h1 class="font-weight-bold headline mt-4 pt-4 text-xs-center">
+          {{ $tr('trashEmptyText') }}
+        </h1>
+        <p class="mt-3 subheading text-xs-center">
+          {{ $tr('trashEmptySubtext') }}
+        </p>
+      </VContainer>
+      <VContent v-else>
+        <VContainer
+          fluid
+          class="pa-4"
+          data-test="list"
+          style="max-height: calc(100vh - 128px); overflow-y: auto"
         >
-          <VDataTable
-            :headers="headers"
-            :items="items"
-            hide-actions
-            must-sort
+          <VCard
+            style="width: 100%; max-width: 900px; margin: 0 auto"
+            flat
+            class="pa-2"
           >
-            <template #headerCell="props">
-              <VLayout
-                v-if="props.header.selectAll"
-                row
-                align-center
-              >
-                <VFlex shrink>
-                  <Checkbox
-                    :inputValue="selected.length === items.length"
-                    :indeterminate="!!selected.length && selected.length !== items.length"
-                    data-test="selectall"
-                    @input="toggleSelectAll"
-                  />
-                </VFlex>
-                <VFlex>
+            <VDataTable
+              :headers="headers"
+              :items="items"
+              hide-actions
+              must-sort
+            >
+              <template #headerCell="props">
+                <VLayout
+                  v-if="props.header.selectAll"
+                  row
+                  align-center
+                >
+                  <VFlex shrink>
+                    <Checkbox
+                      :inputValue="selected.length === items.length"
+                      :indeterminate="!!selected.length && selected.length !== items.length"
+                      data-test="selectall"
+                      @input="toggleSelectAll"
+                    />
+                  </VFlex>
+                  <VFlex>
+                    {{ props.header.text }}
+                  </VFlex>
+                </VLayout>
+                <span v-else>
                   {{ props.header.text }}
-                </VFlex>
-              </VLayout>
-              <span v-else>
-                {{ props.header.text }}
-              </span>
-            </template>
-            <template #items="{ item }">
-              <tr
-                :key="item.id"
-                :style="{ backgroundColor: getItemBackground(item.id) }"
-              >
-                <td>
-                  <VLayout
-                    row
-                    align-center
-                  >
-                    <VFlex shrink>
-                      <Checkbox
-                        v-model="selected"
-                        :value="item.id"
-                        data-test="checkbox"
-                      />
-                    </VFlex>
-                    <VFlex
-                      shrink
-                      class="mx-3"
+                </span>
+              </template>
+              <template #items="{ item }">
+                <tr
+                  :key="item.id"
+                  :style="{ backgroundColor: getItemBackground(item.id) }"
+                >
+                  <td>
+                    <VLayout
+                      row
+                      align-center
                     >
-                      <ContentNodeIcon :kind="item.kind" />
-                    </VFlex>
-                    <VFlex
-                      :class="getTitleClass(item)"
-                      grow
-                    >
-                      <ActionLink
-                        :text="getTitle(item)"
-                        data-test="item"
-                        @click="previewNodeId = item.id"
-                      />
-                    </VFlex>
-                  </VLayout>
-                </td>
-                <td class="text-xs-right">
-                  {{ $formatRelative(item.modified, { now: new Date() }) }}
-                </td>
-              </tr>
-            </template>
-          </VDataTable>
-          <div class="show-more-button-container">
-            <KButton
-              v-if="more"
-              :disabled="moreLoading"
-              @click="loadMore"
-            >
-              {{ showMoreLabel }}
-            </KButton>
-          </div>
-        </VCard>
-      </VContainer>
-      <ResourceDrawer
-        style="margin-top: 64px"
-        :nodeId="previewNodeId"
-        :channelId="currentChannel.id"
-        app
-        @close="previewNodeId = null"
-      />
-    </VContent>
-    <template #bottom>
-      <span
-        v-if="selected.length"
-        class="mr-4 subheading"
-      >
-        {{ getSelectedTopicAndResourceCountText(selected) }}
-      </span>
-      <VSpacer />
-      <VBtn
-        flat
-        :disabled="!selected.length"
-        data-test="restore"
-        @click="moveModalOpen = true"
-      >
-        {{ $tr('restoreButton') }}
-      </VBtn>
-      <VBtn
-        color="primary"
-        :disabled="!selected.length"
-        data-test="delete"
-        @click="showConfirmationDialog = true"
-      >
-        {{ $tr('deleteButton') }}
-      </VBtn>
-    </template>
-    <MessageDialog
-      v-model="showConfirmationDialog"
-      :header="$tr('deleteConfirmationHeader', counts)"
-      :text="$tr('deleteConfirmationText')"
-    >
-      <template #buttons="{ close }">
+                      <VFlex shrink>
+                        <Checkbox
+                          v-model="selected"
+                          :value="item.id"
+                          data-test="checkbox"
+                        />
+                      </VFlex>
+                      <VFlex
+                        shrink
+                        class="mx-3"
+                      >
+                        <ContentNodeIcon :kind="item.kind" />
+                      </VFlex>
+                      <VFlex
+                        :class="getTitleClass(item)"
+                        grow
+                      >
+                        <ActionLink
+                          :text="getTitle(item)"
+                          data-test="item"
+                          @click="previewNodeId = item.id"
+                        />
+                      </VFlex>
+                    </VLayout>
+                  </td>
+                  <td class="text-xs-right">
+                    {{ $formatRelative(item.modified, { now: new Date() }) }}
+                  </td>
+                </tr>
+              </template>
+            </VDataTable>
+            <div class="show-more-button-container">
+              <KButton
+                v-if="more"
+                :disabled="moreLoading"
+                @click="loadMore"
+              >
+                {{ showMoreLabel }}
+              </KButton>
+            </div>
+          </VCard>
+        </VContainer>
+        <ResourceDrawer
+          style="margin-top: 64px"
+          :nodeId="previewNodeId"
+          :channelId="currentChannel.id"
+          app
+          @close="previewNodeId = null"
+        />
+      </VContent>
+      <template #bottom>
+        <span
+          v-if="selected.length"
+          class="mr-4 subheading"
+        >
+          {{ getSelectedTopicAndResourceCountText(selected) }}
+        </span>
+        <VSpacer />
         <VBtn
           flat
-          data-test="closeconfirm"
-          @click="close"
+          :disabled="!selected.length"
+          data-test="restore"
+          @click="moveModalOpen = true"
         >
-          {{ $tr('deleteConfirmationCancelButton') }}
+          {{ $tr('restoreButton') }}
         </VBtn>
         <VBtn
           color="primary"
-          data-test="deleteconfirm"
-          @click="deleteNodes"
+          :disabled="!selected.length"
+          data-test="delete"
+          @click="showConfirmationDialog = true"
         >
-          {{ $tr('deleteConfirmationDeleteButton') }}
+          {{ $tr('deleteButton') }}
         </VBtn>
       </template>
-    </MessageDialog>
+      <KModal
+        v-if="showConfirmationDialog"
+        :title="$tr('deleteConfirmationHeader', counts)"
+        :cancelText="$tr('deleteConfirmationCancelButton')"
+        :submitText="$tr('deleteConfirmationDeleteButton')"
+        data-test="deleteconfirm"
+        @cancel="showConfirmationDialog = false"
+        @submit="deleteNodes"
+      >
+        <p>{{ $tr('deleteConfirmationText') }}</p>
+      </KModal>
+    </FullscreenModal>
     <MoveModal
-      v-if="moveModalOpen"
+      v-else
       ref="moveModal"
       v-model="moveModalOpen"
       :moveNodeIds="selected"
       :movingFromTrash="true"
       @target="moveNodes"
     />
-  </FullscreenModal>
+  </div>
 
 </template>
 
@@ -190,7 +182,6 @@
   import { RouteNames } from '../../constants';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
   import Checkbox from 'shared/views/form/Checkbox';
-  import MessageDialog from 'shared/views/MessageDialog';
   import LoadingText from 'shared/views/LoadingText';
   import FullscreenModal from 'shared/views/FullscreenModal';
   import { titleMixin, routerMixin } from 'shared/mixins';
@@ -204,7 +195,6 @@
       ContentNodeIcon,
       ResourceDrawer,
       Checkbox,
-      MessageDialog,
       LoadingText,
       FullscreenModal,
       MoveModal,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index aea6e1aa7c..80225b2027 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -134,7 +134,7 @@ describe('trashModal', () => {
 
     it('clicking CLOSE on delete confirmation dialog should close the dialog', async () => {
       await wrapper.setData({ showConfirmationDialog: true });
-      await wrapper.findComponent('[data-test="closeconfirm"]').trigger('click');
+      await wrapper.findComponent('[data-test="deleteconfirm"]').vm.$emit('cancel');
       expect(wrapper.vm.showConfirmationDialog).toBe(false);
     });
 
@@ -143,7 +143,7 @@ describe('trashModal', () => {
       const deleteContentNodes = jest.spyOn(wrapper.vm, 'deleteContentNodes');
       deleteContentNodes.mockImplementation(() => Promise.resolve());
       await wrapper.setData({ selected, showConfirmationDialog: true });
-      await wrapper.findComponent('[data-test="deleteconfirm"]').trigger('click');
+      await wrapper.findComponent('[data-test="deleteconfirm"]').vm.$emit('submit');
       expect(deleteContentNodes).toHaveBeenCalledWith(selected);
     });
   });
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.scss b/contentcuration/contentcuration/frontend/shared/styles/main.scss
index 50000d3755..8e3188950c 100644
--- a/contentcuration/contentcuration/frontend/shared/styles/main.scss
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.scss
@@ -52,6 +52,11 @@ body {
   .v-btn:focus-visible {
     outline: 2px solid var(--v-secondary-base) !important;
   }
+
+  > .v-dialog__content,
+  > .v-overlay {
+    z-index: 16 !important;
+  }
 }
 
 /* RTL-related rules */
diff --git a/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue b/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue
index 3412ec4a7e..b3935fcacf 100644
--- a/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/RecommendedResourceCard.vue
@@ -39,31 +39,17 @@
       <KFixedGrid :numCols="2">
         <KFixedGridItem alignment="right">
           <KIconButton
-            ref="goToLocation"
             icon="openNewTab"
+            :tooltip="$tr('goToLocationTooltip')"
+            :aria-label="$tr('goToLocationTooltip')"
             @click.stop="goToLocation"
           />
-          <KTooltip
-            reference="goToLocation"
-            :refs="$refs"
-            appendToOverlay
-            :appearanceOverrides="{ zIndex: 202 }"
-          >
-            {{ $tr('goToLocationTooltip') }}
-          </KTooltip>
           <KIconButton
-            ref="markNotRelevant"
             icon="thumbDown"
+            :tooltip="$tr('markNotRelevantTooltip')"
+            :aria-label="$tr('markNotRelevantTooltip')"
             @click.stop="markNotRelevant"
           />
-          <KTooltip
-            reference="markNotRelevant"
-            :refs="$refs"
-            appendToOverlay
-            :appearanceOverrides="{ zIndex: 202 }"
-          >
-            {{ $tr('markNotRelevantTooltip') }}
-          </KTooltip>
         </KFixedGridItem>
       </KFixedGrid>
     </template>