From 64dd1f96fa2f182cf66fd8b1b73fbe7507b17b63 Mon Sep 17 00:00:00 2001
From: Tom Searle <tom@cogstack.org>
Date: Wed, 2 Sep 2026 16:20:51 +0100
Subject: [PATCH] fix(medcat-trainer): fix unscrollable metataskContainer for
 small screens

---
 .../usecases/MetaAnnotationTask.vue           | 64 ++++++++++++++++---
 .../usecases/MetaAnnotationTaskContainer.vue  | 20 +++++-
 .../components/MetaAnnotationTask.spec.ts     | 38 +++++++++++
 .../MetaAnnotationTaskContainer.spec.ts       | 62 ++++++++++++++++++
 .../frontend/src/views/TrainAnnotations.vue   | 11 +++-
 5 files changed, 185 insertions(+), 10 deletions(-)
 create mode 100644 medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTask.spec.ts
 create mode 100644 medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTaskContainer.spec.ts

diff --git a/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTask.vue b/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTask.vue
index e54da281b..fdec5014e 100644
--- a/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTask.vue
+++ b/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTask.vue
@@ -1,7 +1,9 @@
 <template>
-  <div>
-    <div class="task-name">{{task.name}}</div>
-    <div class="task-description">{{task.description}}</div>
+  <div class="meta-annotation-task">
+    <div class="task-header">
+      <div class="task-name">{{task.name}}</div>
+      <div class="task-description">{{task.description}}</div>
+    </div>
     <div class="task-values-container">
       <button class="btn btn-outline-primary task-value"
               :class="optionStyle(option)"
@@ -41,24 +43,65 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.meta-annotation-task {
+  min-width: 0;
+  container-type: inline-size;
+}
+
+.task-header {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+}
+
 .task-name {
   font-size: 16px;
   padding: 10px 15px 5px 15px;
-  display: inline-block;
-  width: 125px;
+  flex: 0 1 125px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .task-description {
   font-size: 12px;
   padding: 10px 15px 5px 15px;
-  vertical-align: middle;
-  display: inline-block;
-  width: calc(100% - 125px);
+  flex: 1 1 auto;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+@container (max-width: 380px) {
+  .task-name {
+    font-size: 13px;
+    padding: 6px 8px 2px 8px;
+    flex-basis: 88px;
+  }
+
+  .task-description {
+    font-size: 11px;
+    padding: 6px 8px 2px 8px;
+  }
+
+  .task-values-container {
+    padding: 0 8px 8px 8px;
+    gap: 3px;
+
+    .task-value {
+      font-size: 12px;
+      padding: 0.15rem 0.4rem;
+      line-height: 1.2;
+    }
+  }
+
+  .predicted-conf {
+    font-size: 8pt;
+  }
+}
+
 .selected {
   color: #fff;
   background-color: $primary-alt !important;
@@ -79,10 +122,15 @@ export default {
   padding: 0 15px 10px 15px;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
   box-shadow: 0 5px 5px -5px rgba(0,0,0,0.2);
 
   .task-value {
     flex: 1 1 auto;
+    min-width: 0;
+    white-space: normal;
   }
 }
 </style>
diff --git a/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTaskContainer.vue b/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTaskContainer.vue
index c729636c5..14ccc9fc7 100644
--- a/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTaskContainer.vue
+++ b/medcat-trainer/webapp/frontend/src/components/usecases/MetaAnnotationTaskContainer.vue
@@ -90,8 +90,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.meta-task-container {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  max-height: 50%;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  margin-top: auto;
+  overflow: hidden;
+
+  .title {
+    flex-shrink: 0;
+  }
+}
+
 .meta-task-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
   overflow-y: auto;
-  min-height: 250px;
 }
 </style>
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTask.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTask.spec.ts
new file mode 100644
index 000000000..4916b9956
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTask.spec.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MetaAnnotationTask from '@/components/usecases/MetaAnnotationTask.vue'
+
+const task = {
+  id: 1,
+  name: 'Temporality',
+  description: 'When the concept occurred',
+  options: [
+    { id: 10, name: 'Current' },
+    { id: 11, name: 'Historical' }
+  ],
+  value: 10,
+  validated: true,
+  predicted_value: null,
+  acc: 0.9
+}
+
+describe('MetaAnnotationTask.vue', () => {
+  it('renders the task name, description and option buttons', () => {
+    const wrapper = mount(MetaAnnotationTask, { props: { task } })
+
+    expect(wrapper.text()).toContain('Temporality')
+    expect(wrapper.text()).toContain('When the concept occurred')
+    const buttons = wrapper.findAll('button.task-value')
+    expect(buttons).toHaveLength(2)
+    expect(buttons[0].text()).toContain('Current')
+    expect(buttons[1].text()).toContain('Historical')
+  })
+
+  it('emits select:metaAnno when an option is clicked', async () => {
+    const wrapper = mount(MetaAnnotationTask, { props: { task } })
+
+    await wrapper.findAll('button.task-value')[1].trigger('click')
+
+    expect(wrapper.emitted('select:metaAnno')[0]).toEqual([task, task.options[1]])
+  })
+})
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTaskContainer.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTaskContainer.spec.ts
new file mode 100644
index 000000000..8e060d2ae
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetaAnnotationTaskContainer.spec.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import MetaAnnotationTaskContainer from '@/components/usecases/MetaAnnotationTaskContainer.vue'
+
+const mountContainer = () => {
+  const mockGet = vi.fn((url: string) => {
+    if (url === '/api/meta-tasks/') {
+      return Promise.resolve({
+        data: {
+          results: [
+            { id: 1, name: 'Temporality', description: 'When', values: [10, 11] },
+            { id: 2, name: 'Negation', description: 'Affirmed or negated', values: [12, 13] }
+          ]
+        }
+      })
+    }
+    if (url === '/api/meta-task-values/') {
+      return Promise.resolve({
+        data: {
+          results: [
+            { id: 10, name: 'Current' },
+            { id: 11, name: 'Historical' },
+            { id: 12, name: 'Affirmed' },
+            { id: 13, name: 'Negated' }
+          ]
+        }
+      })
+    }
+    if (url.startsWith('/api/meta-annotations/')) {
+      return Promise.resolve({ data: { results: [] } })
+    }
+    return Promise.reject(new Error(`Unexpected request: ${url}`))
+  })
+
+  const wrapper = mount(MetaAnnotationTaskContainer, {
+    props: {
+      modelPackSet: true,
+      taskIDs: [1, 2],
+      selectedEnt: { id: 99 }
+    },
+    global: {
+      mocks: {
+        $http: { get: mockGet, put: vi.fn(), post: vi.fn(), delete: vi.fn() }
+      }
+    }
+  })
+
+  return { wrapper, mockGet }
+}
+
+describe('MetaAnnotationTaskContainer.vue', () => {
+  it('renders fetched meta tasks in a scrollable list', async () => {
+    const { wrapper } = mountContainer()
+    await flushPromises()
+
+    expect(wrapper.find('.meta-task-container').exists()).toBe(true)
+    expect(wrapper.find('.meta-task-list').exists()).toBe(true)
+    expect(wrapper.findAllComponents({ name: 'MetaAnnotationTask' })).toHaveLength(2)
+    expect(wrapper.text()).toContain('Temporality')
+    expect(wrapper.text()).toContain('Negation')
+  })
+})
diff --git a/medcat-trainer/webapp/frontend/src/views/TrainAnnotations.vue b/medcat-trainer/webapp/frontend/src/views/TrainAnnotations.vue
index 6a4330a29..a39def5b3 100644
--- a/medcat-trainer/webapp/frontend/src/views/TrainAnnotations.vue
+++ b/medcat-trainer/webapp/frontend/src/views/TrainAnnotations.vue
@@ -55,7 +55,7 @@
           <div class="sidebar-container">
             <plugin-slot name="train-annotations:sidebar" :project="project" />
             <transition name="slide-left">
-              <div>
+              <div class="sidebar-top">
                 <concept-summary v-if="!conceptSynonymSelection && !hasRelations" :selectedEnt="currentEnt"
                                  :altSearch="altSearch"
                                  :project="project" :searchFilterDBIndex="searchFilterDBIndex"
@@ -1025,11 +1025,20 @@ $app-header-height: 60px;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
   padding: 5px;
 
+  .sidebar-top {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
   .add-annotation {
     width: 100%;
     flex: 1 1 auto;
+    min-height: 0;
   }
 }