From 405384cc1b174892e9fe81c465d98714feb392e6 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 20 Apr 2026 09:35:06 +0200
Subject: [PATCH 1/3] docs: interpretations storybook examples

---
 .storybook/preview.js                        |   3 +-
 src/__demo__/InterpretationModal.stories.js  | 333 ++++++++++++
 src/__demo__/InterpretationThread.stories.js | 272 ++++++++++
 src/__demo__/InterpretationsUnit.stories.js  | 521 +++++++++++++++++--
 4 files changed, 1088 insertions(+), 41 deletions(-)
 create mode 100644 src/__demo__/InterpretationModal.stories.js
 create mode 100644 src/__demo__/InterpretationThread.stories.js

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 3fcea95df..82efa2d65 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,10 +1,11 @@
-import { CssReset } from '@dhis2/ui'
+import { CssReset, CssVariables } from '@dhis2/ui'
 import React from 'react'
 
 export const decorators = [
     (Story) => (
         <div>
             <CssReset />
+            <CssVariables spacers colors layers elevations theme />
             <Story />
             <style jsx>{`
                 :global(html) {
diff --git a/src/__demo__/InterpretationModal.stories.js b/src/__demo__/InterpretationModal.stories.js
new file mode 100644
index 000000000..446abd8a0
--- /dev/null
+++ b/src/__demo__/InterpretationModal.stories.js
@@ -0,0 +1,333 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { colors, spacers, DropdownButton } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { InterpretationModal } from '../components/Interpretations/InterpretationModal/InterpretationModal.js'
+import { InterpretationsProvider } from '../components/Interpretations/InterpretationsProvider/InterpretationsProvider.js'
+
+export default {
+    title: 'InterpretationModal',
+}
+
+const currentUser = {
+    id: 'user001',
+    name: 'Tom Wakiki',
+    authorities: [],
+    settings: {
+        keyAnalysisDisplayProperty: 'name',
+    },
+}
+
+const makeInterpretation = (overrides) => ({
+    id: 'interp-1',
+    text: 'Interpretation text',
+    created: '2026-04-10T14:22:00.000',
+    likes: 0,
+    createdBy: {
+        id: 'user002',
+        displayName: 'Amina Diallo',
+    },
+    comments: [],
+    likedBy: [],
+    access: { write: true, manage: false },
+    ...overrides,
+})
+
+const PlaceholderVisualization = () => (
+    <div
+        style={{
+            width: '100%',
+            height: '100%',
+            minHeight: 300,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: colors.grey100,
+            border: `1px dashed ${colors.grey400}`,
+            borderRadius: 4,
+            color: colors.grey700,
+            fontSize: 14,
+            padding: spacers.dp16,
+        }}
+    >
+        Visualization placeholder
+    </div>
+)
+
+const ModalDownloadDropdown = () => (
+    <div style={{ marginTop: spacers.dp12, marginBottom: spacers.dp16 }}>
+        <DropdownButton
+            component={<div />}
+            disabled
+            open={false}
+            secondary
+            small
+        >
+            {i18n.t('Download data from this date')}
+        </DropdownButton>
+    </div>
+)
+
+const ModalStory = ({ interpretation, interpretationsResolver, children }) => (
+    <CustomDataProvider
+        data={{
+            interpretations:
+                interpretationsResolver ??
+                ((_type, query) => {
+                    if (query.id) {
+                        return interpretation
+                    }
+                    return { interpretations: [interpretation] }
+                }),
+        }}
+    >
+        <InterpretationsProvider currentUser={currentUser}>
+            {children}
+        </InterpretationsProvider>
+    </CustomDataProvider>
+)
+
+ModalStory.propTypes = {
+    children: PropTypes.node,
+    interpretation: PropTypes.object,
+    interpretationsResolver: PropTypes.func,
+}
+
+export const NoComments = () => {
+    const interpretation = makeInterpretation({
+        text: 'The ANC coverage rate has improved steadily across all districts this quarter, with the Eastern region showing the most significant gains.',
+        likes: 2,
+        likedBy: [{ id: 'user001' }, { id: 'user003' }],
+    })
+
+    return (
+        <ModalStory interpretation={interpretation}>
+            <InterpretationModal
+                interpretationId="interp-1"
+                isVisualizationLoading={false}
+                visualization={{
+                    id: 'viz-1',
+                    displayName: 'ANC Coverage by District - Q1 2026',
+                }}
+                pluginComponent={PlaceholderVisualization}
+                downloadMenuComponent={ModalDownloadDropdown}
+                onClose={Function.prototype}
+                onResponsesReceived={Function.prototype}
+            />
+        </ModalStory>
+    )
+}
+
+NoComments.story = {
+    name: 'No comments',
+}
+
+export const WithAFewComments = () => {
+    const interpretation = makeInterpretation({
+        text: 'Immunization coverage for Penta 3 dropped below 80% in three districts last month. This needs urgent attention before the next reporting cycle.',
+        likes: 5,
+        likedBy: [
+            { id: 'user001' },
+            { id: 'user003' },
+            { id: 'user004' },
+            { id: 'user005' },
+            { id: 'user006' },
+        ],
+        comments: [
+            {
+                id: 'c1',
+                text: 'I checked the district-level data and it looks like the drop is concentrated in two facilities that had staff turnover last month.',
+                created: '2026-04-11T09:15:00.000',
+                createdBy: {
+                    id: 'user003',
+                    displayName: 'James Okonkwo',
+                },
+            },
+            {
+                id: 'c2',
+                text: 'We should flag this for the regional review meeting next week.',
+                created: '2026-04-11T11:42:00.000',
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+            },
+            {
+                id: 'c3',
+                text: 'Agreed. I will prepare a summary of the affected facilities and share it before the meeting.',
+                created: '2026-04-12T08:05:00.000',
+                createdBy: {
+                    id: 'user001',
+                    displayName: 'Tom Wakiki',
+                },
+            },
+        ],
+    })
+
+    return (
+        <ModalStory interpretation={interpretation}>
+            <InterpretationModal
+                interpretationId="interp-1"
+                isVisualizationLoading={false}
+                visualization={{
+                    id: 'viz-2',
+                    displayName:
+                        'Penta 3 Immunization Coverage by District Sorted by Participation Rates and Coverage Beyond District Funding Levels - March 2026',
+                }}
+                pluginComponent={PlaceholderVisualization}
+                // downloadMenuComponent={ModalDownloadDropdown}
+                onClose={Function.prototype}
+                onResponsesReceived={Function.prototype}
+            />
+        </ModalStory>
+    )
+}
+
+WithAFewComments.story = {
+    name: 'With a few comments',
+}
+
+export const WithManyComments = () => {
+    const interpretation = makeInterpretation({
+        text: 'Disease surveillance data shows an unusual cluster of acute watery diarrhoea cases in the Ashanti region. The pattern warrants investigation by the rapid response team.',
+        likes: 10,
+        likedBy: [
+            { id: 'user001' },
+            { id: 'user002' },
+            { id: 'user003' },
+            { id: 'user004' },
+            { id: 'user005' },
+            { id: 'user006' },
+            { id: 'user007' },
+            { id: 'user008' },
+            { id: 'user009' },
+            { id: 'user010' },
+        ],
+        comments: [
+            {
+                id: 'c1',
+                text: 'I noticed this trend last week. The cluster seems to be centred around the Kumasi metropolitan area.',
+                created: '2026-04-10T15:30:00.000',
+                createdBy: {
+                    id: 'user003',
+                    displayName: 'James Okonkwo',
+                },
+            },
+            {
+                id: 'c2',
+                text: 'Could this be linked to the water supply disruption reported two weeks ago? The timing fits.',
+                created: '2026-04-10T16:12:00.000',
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+            },
+            {
+                id: 'c3',
+                text: 'Good point. I have pulled the WASH indicators for those communities and there is a clear correlation with facilities reporting low water quality scores.',
+                created: '2026-04-11T08:45:00.000',
+                createdBy: {
+                    id: 'user005',
+                    displayName: 'Kwame Asante',
+                },
+            },
+            {
+                id: 'c4',
+                text: 'The rapid response team has been notified. They are planning field visits for Thursday and Friday this week.',
+                created: '2026-04-11T10:20:00.000',
+                createdBy: {
+                    id: 'user006',
+                    displayName: 'Grace Nkrumah',
+                },
+            },
+            {
+                id: 'c5',
+                text: 'We should also check neighbouring districts for any spillover. Brong-Ahafo and Eastern regions share water sources with some of the affected communities.',
+                created: '2026-04-11T14:00:00.000',
+                createdBy: {
+                    id: 'user001',
+                    displayName: 'Tom Wakiki',
+                },
+            },
+            {
+                id: 'c6',
+                text: 'Preliminary lab results from Komfo Anokye confirm Vibrio cholerae in 3 of the 8 samples. This needs to be escalated immediately.',
+                created: '2026-04-12T07:30:00.000',
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+            },
+            {
+                id: 'c7',
+                text: 'I have updated the weekly epidemiological bulletin to include this cluster. The national surveillance team has been copied.',
+                created: '2026-04-12T09:55:00.000',
+                createdBy: {
+                    id: 'user007',
+                    displayName: 'Samuel Owusu',
+                },
+            },
+            {
+                id: 'c8',
+                text: 'Stock levels of ORS and IV fluids at the affected facilities look adequate for now, but we should monitor daily given the trajectory.',
+                created: '2026-04-12T13:10:00.000',
+                createdBy: {
+                    id: 'user005',
+                    displayName: 'Kwame Asante',
+                },
+            },
+        ],
+    })
+
+    return (
+        <ModalStory interpretation={interpretation}>
+            <InterpretationModal
+                interpretationId="interp-1"
+                isVisualizationLoading={false}
+                visualization={{
+                    id: 'viz-3',
+                    displayName:
+                        'Acute Watery Diarrhoea Cases - Ashanti Region Weekly Surveillance',
+                }}
+                pluginComponent={PlaceholderVisualization}
+                downloadMenuComponent={ModalDownloadDropdown}
+                onClose={Function.prototype}
+                onResponsesReceived={Function.prototype}
+            />
+        </ModalStory>
+    )
+}
+
+WithManyComments.story = {
+    name: 'With many comments',
+}
+
+export const Error = () => (
+    <ModalStory
+        interpretationsResolver={() =>
+            Promise.reject(
+                new Error(
+                    'Network request failed while loading the interpretation'
+                )
+            )
+        }
+    >
+        <InterpretationModal
+            interpretationId="interp-1"
+            isVisualizationLoading={false}
+            visualization={{
+                id: 'viz-error',
+                displayName: 'Errored visualization',
+            }}
+            pluginComponent={PlaceholderVisualization}
+            downloadMenuComponent={ModalDownloadDropdown}
+            onClose={Function.prototype}
+            onResponsesReceived={Function.prototype}
+        />
+    </ModalStory>
+)
+
+Error.story = {
+    name: 'Error',
+}
diff --git a/src/__demo__/InterpretationThread.stories.js b/src/__demo__/InterpretationThread.stories.js
new file mode 100644
index 000000000..4ee6c539d
--- /dev/null
+++ b/src/__demo__/InterpretationThread.stories.js
@@ -0,0 +1,272 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { DashboardInterpretationThread } from '../components/Interpretations/DashboardItemInterpretations/DashboardInterpretationThread.js'
+import { InterpretationsProvider } from '../components/Interpretations/InterpretationsProvider/InterpretationsProvider.js'
+
+export default {
+    title: 'InterpretationThread',
+}
+
+const currentUser = {
+    id: 'user001',
+    name: 'Tom Wakiki',
+    authorities: [],
+}
+
+const makeInterpretation = (overrides) => ({
+    id: 'interp-1',
+    text: 'Interpretation text',
+    created: '2026-04-10T14:22:00.000',
+    likes: 0,
+    createdBy: {
+        id: 'user002',
+        displayName: 'Amina Diallo',
+    },
+    comments: [],
+    likedBy: [],
+    access: { write: true, manage: false },
+    ...overrides,
+})
+
+const ThreadStory = ({ interpretation, interpretationsResolver, children }) => (
+    <CustomDataProvider
+        data={{
+            interpretations:
+                interpretationsResolver ??
+                ((_type, query) => {
+                    if (query.id) {
+                        return interpretation
+                    }
+                    return { interpretations: [interpretation] }
+                }),
+        }}
+    >
+        <InterpretationsProvider currentUser={currentUser}>
+            {children}
+        </InterpretationsProvider>
+    </CustomDataProvider>
+)
+
+ThreadStory.propTypes = {
+    children: PropTypes.node,
+    interpretation: PropTypes.object,
+    interpretationsResolver: PropTypes.func,
+}
+
+export const NoComments = () => {
+    const interpretation = makeInterpretation({
+        text: 'The ANC coverage rate has improved steadily across all districts this quarter, with the Eastern region showing the most significant gains.',
+        likes: 2,
+        likedBy: [{ id: 'user001' }, { id: 'user003' }],
+    })
+
+    return (
+        <ThreadStory interpretation={interpretation}>
+            <DashboardInterpretationThread
+                interpretationId="interp-1"
+                onClose={Function.prototype}
+            />
+        </ThreadStory>
+    )
+}
+
+NoComments.story = {
+    name: 'No comments',
+}
+
+export const WithAFewComments = () => {
+    const interpretation = makeInterpretation({
+        text: 'Immunization coverage for Penta 3 dropped below 80% in three districts last month. This needs urgent attention before the next reporting cycle.',
+        likes: 5,
+        likedBy: [
+            { id: 'user001' },
+            { id: 'user003' },
+            { id: 'user004' },
+            { id: 'user005' },
+            { id: 'user006' },
+        ],
+        comments: [
+            {
+                id: 'c1',
+                text: 'I checked the district-level data and it looks like the drop is concentrated in two facilities that had staff turnover last month.',
+                created: '2026-04-11T09:15:00.000',
+                createdBy: {
+                    id: 'user003',
+                    displayName: 'James Okonkwo',
+                },
+            },
+            {
+                id: 'c2',
+                text: 'We should flag this for the regional review meeting next week.',
+                created: '2026-04-11T11:42:00.000',
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+            },
+            {
+                id: 'c3',
+                text: 'Agreed. I will prepare a summary of the affected facilities and share it before the meeting.',
+                created: '2026-04-12T08:05:00.000',
+                createdBy: {
+                    id: 'user001',
+                    displayName: 'Tom Wakiki',
+                },
+            },
+        ],
+    })
+
+    return (
+        <ThreadStory interpretation={interpretation}>
+            <DashboardInterpretationThread
+                interpretationId="interp-1"
+                onClose={Function.prototype}
+            />
+        </ThreadStory>
+    )
+}
+
+WithAFewComments.story = {
+    name: 'With a few comments',
+}
+
+export const WithManyComments = () => {
+    const interpretation = makeInterpretation({
+        text: 'Disease surveillance data shows an unusual cluster of acute watery diarrhoea cases in the Ashanti region. The pattern warrants investigation by the rapid response team.',
+        likes: 10,
+        likedBy: [
+            { id: 'user001' },
+            { id: 'user002' },
+            { id: 'user003' },
+            { id: 'user004' },
+            { id: 'user005' },
+            { id: 'user006' },
+            { id: 'user007' },
+            { id: 'user008' },
+            { id: 'user009' },
+            { id: 'user010' },
+        ],
+        comments: [
+            {
+                id: 'c1',
+                text: 'I noticed this trend last week. The cluster seems to be centred around the Kumasi metropolitan area.',
+                created: '2026-04-10T15:30:00.000',
+                createdBy: {
+                    id: 'user003',
+                    displayName: 'James Okonkwo',
+                },
+            },
+            {
+                id: 'c2',
+                text: 'Could this be linked to the water supply disruption reported two weeks ago? The timing fits.',
+                created: '2026-04-10T16:12:00.000',
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+            },
+            {
+                id: 'c3',
+                text: 'Good point. I have pulled the WASH indicators for those communities and there is a clear correlation with facilities reporting low water quality scores.',
+                created: '2026-04-11T08:45:00.000',
+                createdBy: {
+                    id: 'user005',
+                    displayName: 'Kwame Asante',
+                },
+            },
+            {
+                id: 'c4',
+                text: 'The rapid response team has been notified. They are planning field visits for Thursday and Friday this week.',
+                created: '2026-04-11T10:20:00.000',
+                createdBy: {
+                    id: 'user006',
+                    displayName: 'Grace Nkrumah',
+                },
+            },
+            {
+                id: 'c5',
+                text: 'We should also check neighbouring districts for any spillover. Brong-Ahafo and Eastern regions share water sources with some of the affected communities.',
+                created: '2026-04-11T14:00:00.000',
+                createdBy: {
+                    id: 'user001',
+                    displayName: 'Tom Wakiki',
+                },
+            },
+            {
+                id: 'c6',
+                text: 'Preliminary lab results from Komfo Anokye confirm Vibrio cholerae in 3 of the 8 samples. This needs to be escalated immediately.',
+                created: '2026-04-12T07:30:00.000',
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+            },
+            {
+                id: 'c7',
+                text: 'I have updated the weekly epidemiological bulletin to include this cluster. The national surveillance team has been copied.',
+                created: '2026-04-12T09:55:00.000',
+                createdBy: {
+                    id: 'user007',
+                    displayName: 'Samuel Owusu',
+                },
+            },
+            {
+                id: 'c8',
+                text: 'Stock levels of ORS and IV fluids at the affected facilities look adequate for now, but we should monitor daily given the trajectory.',
+                created: '2026-04-12T13:10:00.000',
+                createdBy: {
+                    id: 'user005',
+                    displayName: 'Kwame Asante',
+                },
+            },
+        ],
+    })
+
+    return (
+        <ThreadStory interpretation={interpretation}>
+            <DashboardInterpretationThread
+                interpretationId="interp-1"
+                onClose={Function.prototype}
+            />
+        </ThreadStory>
+    )
+}
+
+WithManyComments.story = {
+    name: 'With many comments',
+}
+
+export const Loading = () => (
+    <ThreadStory interpretationsResolver={() => new Promise(() => {})}>
+        <DashboardInterpretationThread
+            interpretationId="interp-1"
+            onClose={Function.prototype}
+        />
+    </ThreadStory>
+)
+
+Loading.story = {
+    name: 'Loading',
+}
+
+export const Error = () => (
+    <ThreadStory
+        interpretationsResolver={() =>
+            Promise.reject(
+                new Error(
+                    'Network request failed while loading the interpretation'
+                )
+            )
+        }
+    >
+        <DashboardInterpretationThread
+            interpretationId="interp-1"
+            onClose={Function.prototype}
+        />
+    </ThreadStory>
+)
+
+Error.story = {
+    name: 'Error',
+}
diff --git a/src/__demo__/InterpretationsUnit.stories.js b/src/__demo__/InterpretationsUnit.stories.js
index ffa291e13..c5f392796 100644
--- a/src/__demo__/InterpretationsUnit.stories.js
+++ b/src/__demo__/InterpretationsUnit.stories.js
@@ -1,4 +1,5 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { InterpretationsProvider } from '../components/Interpretations/InterpretationsProvider/InterpretationsProvider.js'
 import { InterpretationsUnit } from '../components/Interpretations/InterpretationsUnit/index.js'
@@ -7,56 +8,496 @@ export default {
     title: 'IntepretationsUnit',
 }
 
-export const Default = () => {
-    return (
-        <CustomDataProvider
-            data={{
-                interpretations: {
-                    interpretations: [],
-                },
-            }}
-        >
-            <InterpretationsProvider
-                currentUser={{
-                    name: 'Tom Wakiki',
-                }}
-            >
-                <InterpretationsUnit
-                    id="abcd"
-                    onReplyIconClick={Function.prototype}
-                    type="eventVisualization"
-                    visualizationHasTimeDimension={true}
-                />
-            </InterpretationsProvider>
-        </CustomDataProvider>
-    )
+const currentUser = {
+    id: 'user001',
+    name: 'Tom Wakiki',
+    authorities: [],
 }
 
-export const WithNoTimeDimensionsWarning = () => {
-    return (
+const makeInterpretation = (overrides) => ({
+    id: 'interp-1',
+    text: 'Interpretation text',
+    created: '2026-03-15T10:30:00.000',
+    likes: 0,
+    createdBy: {
+        id: 'user001',
+        displayName: 'Tom Wakiki',
+    },
+    comments: [],
+    likedBy: [],
+    access: { write: true, manage: true },
+    ...overrides,
+})
+
+const stubReplies = (count, prefix) =>
+    Array.from({ length: count }, (_, i) => ({ id: `${prefix}-r${i}` }))
+
+const InterpretationsStory = ({
+    interpretations,
+    interpretationsResolver,
+    children,
+    containerWidth,
+}) => (
+    <div style={{ width: containerWidth, border: '1px solid lightgrey' }}>
         <CustomDataProvider
             data={{
-                interpretations: {
-                    interpretations: [],
-                },
+                interpretations: interpretationsResolver ?? { interpretations },
             }}
         >
-            <InterpretationsProvider
-                currentUser={{
-                    name: 'Tom Wakiki',
-                }}
-            >
-                <InterpretationsUnit
-                    id="abcd"
-                    onReplyIconClick={Function.prototype}
-                    type="eventVisualization"
-                    visualizationHasTimeDimension={false}
-                />
+            <InterpretationsProvider currentUser={currentUser}>
+                {children}
             </InterpretationsProvider>
         </CustomDataProvider>
-    )
+    </div>
+)
+
+InterpretationsStory.defaultProps = {
+    interpretations: [],
+    containerWidth: 360,
+}
+
+InterpretationsStory.propTypes = {
+    children: PropTypes.node,
+    containerWidth: PropTypes.number,
+    interpretations: PropTypes.array,
+    interpretationsResolver: PropTypes.func,
 }
 
+const DefaultUnit = (props) => (
+    <InterpretationsUnit
+        id="abcd"
+        onInterpretationClick={Function.prototype}
+        onReplyIconClick={Function.prototype}
+        type="eventVisualization"
+        visualizationHasTimeDimension={true}
+        {...props}
+    />
+)
+
+export const Default = () => (
+    <InterpretationsStory>
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+export const WithNoTimeDimensionsWarning = () => (
+    <InterpretationsStory>
+        <DefaultUnit visualizationHasTimeDimension={false} />
+    </InterpretationsStory>
+)
+
 WithNoTimeDimensionsWarning.story = {
     name: 'With no time dimensions warning',
 }
+
+export const Loading = () => (
+    <InterpretationsStory interpretationsResolver={() => new Promise(() => {})}>
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+Loading.story = {
+    name: 'Loading',
+}
+
+export const Error = () => (
+    <InterpretationsStory
+        interpretationsResolver={() =>
+            Promise.reject(
+                new Error(
+                    'Network request failed while loading interpretations'
+                )
+            )
+        }
+    >
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+Error.story = {
+    name: 'Error',
+}
+
+const dashboardRedirectUrl =
+    'https://play.dhis2.org/demo/dhis-web-dashboard/abcd123ef'
+
+export const DashboardUsage = () => (
+    <InterpretationsStory
+        interpretations={[
+            makeInterpretation({
+                id: 'interp-1',
+                text: 'The ANC coverage rate has improved steadily across all districts this quarter, with the Eastern region showing the most significant gains. This aligns with the increased outreach activities reported in the monthly summaries.',
+                created: '2026-04-10T14:22:00.000',
+                likes: 3,
+                createdBy: {
+                    id: 'user002',
+                    displayName: 'Amina Diallo',
+                },
+                comments: [{ id: 'c1' }, { id: 'c2' }],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user003' },
+                    { id: 'user004' },
+                ],
+                access: { write: false, manage: false },
+            }),
+        ]}
+    >
+        <DefaultUnit dashboardRedirectUrl={dashboardRedirectUrl} />
+    </InterpretationsStory>
+)
+
+DashboardUsage.story = {
+    name: 'Dashboard usage',
+}
+
+export const WithOneInterpretation = () => (
+    <InterpretationsStory
+        interpretations={[
+            makeInterpretation({
+                id: 'interp-1',
+                text: 'The ANC coverage rate has improved steadily across all districts this quarter, with the Eastern region showing the most significant gains. This aligns with the increased outreach activities reported in the monthly summaries.',
+                created: '2026-04-10T14:22:00.000',
+                likes: 3,
+                createdBy: {
+                    id: 'user002',
+                    displayName: 'Amina Diallo',
+                },
+                comments: [{ id: 'c1' }, { id: 'c2' }],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user003' },
+                    { id: 'user004' },
+                ],
+                access: { write: false, manage: false },
+            }),
+        ]}
+    >
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+WithOneInterpretation.story = {
+    name: 'With one interpretation',
+}
+
+export const WithInterpretationForCurrentUser = () => (
+    <InterpretationsStory
+        interpretations={[
+            makeInterpretation({
+                id: 'interp-short',
+                text: 'Dropout rates look normal.',
+                created: '2026-04-14T09:05:00.000',
+                likes: 0,
+                createdBy: {
+                    id: 'user001',
+                    displayName: 'Tom Wakiki',
+                },
+                access: { write: true, manage: true },
+            }),
+            makeInterpretation({
+                id: 'interp-long',
+                text: 'After reviewing the disaggregated malaria case data for Q1 2026, there is a concerning upward trend in confirmed cases among children under 5 in the Northern and Upper West regions. The increase appears to correlate with the delayed distribution of insecticide-treated nets reported in the logistics pipeline dashboard. District-level data shows that facilities in rural areas are disproportionately affected, with some health posts reporting a 40% increase compared to the same period last year. I recommend cross-referencing this with the supply chain data to determine whether the net distribution delays are the primary driver, or if there are additional factors such as changes in rainfall patterns or diagnostic capacity. The regional health directorate should be flagged for follow-up, and this should be discussed in the next quarterly review meeting.',
+                created: '2026-04-08T16:45:00.000',
+                likes: 7,
+                createdBy: {
+                    id: 'user004',
+                    displayName: 'Dr. Fatou Mensah',
+                },
+                comments: [
+                    { id: 'c3' },
+                    { id: 'c4' },
+                    { id: 'c5' },
+                    { id: 'c6' },
+                ],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user002' },
+                    { id: 'user003' },
+                    { id: 'user005' },
+                    { id: 'user006' },
+                    { id: 'user007' },
+                    { id: 'user008' },
+                ],
+                access: { write: true, manage: false },
+            }),
+        ]}
+    >
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+WithInterpretationForCurrentUser.story = {
+    name: 'With an interpretation for current user',
+}
+
+const verboseUserA =
+    'Prof. Æþelred María-José van Müller‑Wilson ⟨DHIS2⟩ · π≈3.14 — 部署/営業 (ret.)'
+
+const verboseUserB =
+    'المراجعة الرسمية — O\'Brien & "Søren" Ølsgaard 日本語 [coord.]'
+
+const verboseInterpretationTextA = `## Outbreak-adjacent note (stress test)
+
+*Facility* ratios vs **national** targets — see _ANC_ coverage.
+
+- Bullet one: https://example.com/very/long/path/segments?foo=bar&baz=qux#section-日本語
+- Bullet two: mixed digits ₂₃⁴⁵/₁₀₀% and symbols §¶†‡
+- RTL snippet: مرحبا ← center → 你好
+
+Directional / bidi: אַל־פִּי הַדִּין — then latin again.
+
+:+1: :-) Emoji row :-( :-1
+
+\`SELECT *\` is *not* executed here; pipes | || ||| appear inline.
+
+Z̈o̷m̷b̷i̷e̷ ̷c̷o̷m̷b̷i̷n̷i̷n̷g̷ ̷m̷a̷r̷k̷s̷ ̷(̷N̷F̷D̷)̷`
+
+const verboseInterpretationTextB = `# HMIS / logistics cross-check
+
+1. Numbered list with *emphasis*
+2. Second item with _italic_ and URL https://dhis2.org/foo_(parens)_in_path
+
+> Block-style paragraph: "quotes" 'apostrophes' «guillemets» — en-dash – and em-dash —
+
+Math-ish: ∀x ∈ ℝ, ∑ᵢ nᵢ ≥ 0 · ± × ÷ ≈ ≠ ≤ ≥ ∞
+
+Whitespace:
+
+    four spaces line (code-ish)
+
+Tab\tand newline breaks below.
+
+---
+
+Final line: 🏥📊 mixed with text.`
+
+export const StressTest = () => (
+    <InterpretationsStory
+        containerWidth={360}
+        interpretations={[
+            makeInterpretation({
+                id: 'interp-verbose-a',
+                text: verboseInterpretationTextA,
+                created: '2026-04-16T11:59:00.000',
+                likes: 3847,
+                createdBy: {
+                    id: 'user-verbose-a',
+                    displayName: verboseUserA,
+                },
+                comments: stubReplies(127, 'va'),
+                likedBy: [{ id: 'user001' }],
+                access: { write: true, manage: true },
+            }),
+            makeInterpretation({
+                id: 'interp-verbose-b',
+                text: verboseInterpretationTextB,
+                created: '2026-04-15T08:30:00.000',
+                likes: 1926,
+                createdBy: {
+                    id: 'user-verbose-b',
+                    displayName: verboseUserB,
+                },
+                comments: stubReplies(143, 'vb'),
+                likedBy: [],
+                access: { write: false, manage: false },
+            }),
+        ]}
+    >
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+StressTest.story = {
+    name: 'Stress test',
+}
+
+export const WithManyInterpretations = () => (
+    <InterpretationsStory
+        interpretations={[
+            makeInterpretation({
+                id: 'interp-m01',
+                text: 'OPD attendance has been consistently above target in all urban facilities this month. The increase in walk-in patients could be linked to the recent community health awareness campaign.',
+                created: '2026-04-15T11:20:00.000',
+                likes: 5,
+                createdBy: { id: 'user002', displayName: 'Amina Diallo' },
+                comments: [{ id: 'c10' }, { id: 'c11' }],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user003' },
+                    { id: 'user004' },
+                    { id: 'user005' },
+                    { id: 'user006' },
+                ],
+            }),
+            makeInterpretation({
+                id: 'interp-m02',
+                text: 'Immunization coverage for Penta 3 dropped below 80% in three districts last month. This needs urgent attention before the next reporting cycle.',
+                created: '2026-04-15T09:10:00.000',
+                likes: 2,
+                createdBy: { id: 'user003', displayName: 'James Okonkwo' },
+                comments: [{ id: 'c12' }],
+                likedBy: [{ id: 'user002' }, { id: 'user004' }],
+                access: { write: true, manage: false },
+            }),
+            makeInterpretation({
+                id: 'interp-m03',
+                text: 'The facility-level comparison shows that Korle Bu and Ridge Hospital have significantly different referral patterns despite serving similar catchment populations.',
+                created: '2026-04-14T16:30:00.000',
+                likes: 0,
+                createdBy: { id: 'user001', displayName: 'Tom Wakiki' },
+                access: { write: true, manage: true },
+            }),
+            makeInterpretation({
+                id: 'interp-m04',
+                text: 'Stock-out data for essential medicines looks incomplete for the Southern region. Several facilities have not reported for two consecutive months.',
+                created: '2026-04-14T08:45:00.000',
+                likes: 0,
+                createdBy: { id: 'user005', displayName: 'Kwame Asante' },
+                comments: [{ id: 'c13' }, { id: 'c14' }, { id: 'c15' }],
+                access: { write: false, manage: false },
+            }),
+            makeInterpretation({
+                id: 'interp-m05',
+                text: 'Maternal mortality ratio has decreased by 15% compared to the same quarter last year. The introduction of the emergency obstetric care training programme appears to be having a positive effect.',
+                created: '2026-04-12T14:00:00.000',
+                likes: 12,
+                createdBy: { id: 'user006', displayName: 'Grace Nkrumah' },
+                comments: [{ id: 'c16' }, { id: 'c17' }],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user002' },
+                    { id: 'user003' },
+                    { id: 'user004' },
+                    { id: 'user005' },
+                    { id: 'user007' },
+                    { id: 'user008' },
+                    { id: 'user009' },
+                    { id: 'user010' },
+                    { id: 'user011' },
+                    { id: 'user012' },
+                    { id: 'user013' },
+                ],
+            }),
+            makeInterpretation({
+                id: 'interp-m06',
+                text: 'TB case notification rate is trending upward in mining communities. This may reflect improved case finding rather than a true increase in incidence.',
+                created: '2026-04-12T10:15:00.000',
+                likes: 3,
+                createdBy: { id: 'user002', displayName: 'Amina Diallo' },
+                comments: [{ id: 'c18' }],
+                likedBy: [
+                    { id: 'user003' },
+                    { id: 'user005' },
+                    { id: 'user006' },
+                ],
+                access: { write: true, manage: false },
+            }),
+            makeInterpretation({
+                id: 'interp-m07',
+                text: 'The HIV testing yield at antenatal clinics remains stable at around 2.3%, consistent with national estimates. No significant geographic variation observed this quarter.',
+                created: '2026-04-11T13:50:00.000',
+                likes: 1,
+                createdBy: { id: 'user007', displayName: 'Samuel Owusu' },
+                likedBy: [{ id: 'user002' }],
+            }),
+            makeInterpretation({
+                id: 'interp-m08',
+                text: 'Water quality indicators at community health posts in the Volta region are below acceptable thresholds. Three facilities flagged for follow-up inspections.',
+                created: '2026-04-10T15:30:00.000',
+                likes: 4,
+                createdBy: { id: 'user005', displayName: 'Kwame Asante' },
+                comments: [
+                    { id: 'c19' },
+                    { id: 'c20' },
+                    { id: 'c21' },
+                    { id: 'c22' },
+                ],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user003' },
+                    { id: 'user006' },
+                    { id: 'user007' },
+                ],
+                access: { write: false, manage: false },
+            }),
+            makeInterpretation({
+                id: 'interp-m09',
+                text: 'Nutrition screening coverage for children 6-59 months has improved from 62% to 78% since the deployment of community health volunteers in the pilot districts.',
+                created: '2026-04-09T11:00:00.000',
+                likes: 6,
+                createdBy: { id: 'user006', displayName: 'Grace Nkrumah' },
+                comments: [{ id: 'c23' }],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user002' },
+                    { id: 'user004' },
+                    { id: 'user005' },
+                    { id: 'user007' },
+                    { id: 'user008' },
+                ],
+            }),
+            makeInterpretation({
+                id: 'interp-m10',
+                text: 'The data quality score for the HMIS monthly reports has dropped across several districts. Late reporting and missing values are the primary issues identified.',
+                created: '2026-04-08T09:20:00.000',
+                likes: 2,
+                createdBy: { id: 'user003', displayName: 'James Okonkwo' },
+                comments: [{ id: 'c24' }, { id: 'c25' }],
+                likedBy: [{ id: 'user005' }, { id: 'user006' }],
+                access: { write: true, manage: false },
+            }),
+            makeInterpretation({
+                id: 'interp-m11',
+                text: 'Outreach vaccination sessions in hard-to-reach areas contributed to a 10% increase in fully immunized children under 1 year in the Northern region.',
+                created: '2026-04-07T14:40:00.000',
+                likes: 8,
+                createdBy: { id: 'user004', displayName: 'Dr. Fatou Mensah' },
+                comments: [{ id: 'c26' }, { id: 'c27' }, { id: 'c28' }],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user002' },
+                    { id: 'user003' },
+                    { id: 'user005' },
+                    { id: 'user006' },
+                    { id: 'user007' },
+                    { id: 'user008' },
+                    { id: 'user009' },
+                ],
+            }),
+            makeInterpretation({
+                id: 'interp-m12',
+                text: 'Disease surveillance data shows an unusual cluster of acute watery diarrhoea cases in the Ashanti region. The pattern warrants investigation by the rapid response team.',
+                created: '2026-04-05T08:00:00.000',
+                likes: 10,
+                createdBy: { id: 'user007', displayName: 'Samuel Owusu' },
+                comments: [
+                    { id: 'c29' },
+                    { id: 'c30' },
+                    { id: 'c31' },
+                    { id: 'c32' },
+                    { id: 'c33' },
+                ],
+                likedBy: [
+                    { id: 'user001' },
+                    { id: 'user002' },
+                    { id: 'user003' },
+                    { id: 'user004' },
+                    { id: 'user005' },
+                    { id: 'user006' },
+                    { id: 'user008' },
+                    { id: 'user009' },
+                    { id: 'user010' },
+                    { id: 'user011' },
+                ],
+                access: { write: true, manage: false },
+            }),
+        ]}
+    >
+        <DefaultUnit />
+    </InterpretationsStory>
+)
+
+WithManyInterpretations.story = {
+    name: 'With 12 interpretations',
+}

From e51aa601e37c84016068865a3019d6095d3abce4 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 20 Apr 2026 10:48:33 +0200
Subject: [PATCH 2/3] fix(interpretation): visual design, UX improvements

---
 .../CommentDeleteButton.js                    | 12 ++-
 .../InterpretationModal/CommentUpdateForm.js  | 50 +++++-------
 .../InterpretationModal.js                    | 46 +++++------
 .../InterpretationThread.js                   | 30 ++-----
 .../useModalContentWidth.js                   |  2 +-
 .../InterpretationsUnit/InterpretationForm.js |  1 +
 .../InterpretationsUnit/InterpretationList.js | 33 +-------
 .../InterpretationsUnit.js                    |  4 +-
 .../common/Interpretation/Interpretation.js   | 34 ++++----
 .../InterpretationDeleteButton.js             | 12 ++-
 .../InterpretationSharingLink.js              | 22 ++----
 .../InterpretationUpdateForm.js               | 61 ++++++---------
 .../Interpretations/common/Message/Message.js | 67 ++++++++++------
 .../common/Message/MessageButtonStrip.js      |  5 +-
 .../common/Message/MessageEditorContainer.js  |  4 +-
 .../common/Message/MessageIconButton.js       | 55 ++++++++++---
 .../common/Message/MessageInput.js            |  3 +-
 .../common/Message/MessageStatsBar.js         |  3 +-
 .../Interpretations/common/useConfirmClick.js | 35 +++++++++
 src/components/RichText/Editor/Editor.js      | 59 ++++++++------
 .../RichText/Editor/styles/Editor.style.js    | 78 ++++++++++++++-----
 21 files changed, 350 insertions(+), 266 deletions(-)
 create mode 100644 src/components/Interpretations/common/useConfirmClick.js

diff --git a/src/components/Interpretations/InterpretationModal/CommentDeleteButton.js b/src/components/Interpretations/InterpretationModal/CommentDeleteButton.js
index 72aed2ce1..2379e1022 100644
--- a/src/components/Interpretations/InterpretationModal/CommentDeleteButton.js
+++ b/src/components/Interpretations/InterpretationModal/CommentDeleteButton.js
@@ -3,18 +3,26 @@ import { IconDelete16, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { MessageIconButton } from '../common/index.js'
+import { useConfirmClick } from '../common/useConfirmClick.js'
 import { useDeleteCommentFromActiveInterpretation } from '../InterpretationsProvider/hooks.js'
 
 const CommentDeleteButton = ({ id }) => {
     const [remove, { loading, error }] =
         useDeleteCommentFromActiveInterpretation({ id })
+    const { isConfirming, onClick } = useConfirmClick(remove)
 
     return (
         <div className="delete-button-container">
             <MessageIconButton
-                tooltipContent={i18n.t('Delete')}
+                tooltipContent={
+                    isConfirming
+                        ? i18n.t('Click again to delete')
+                        : i18n.t('Delete')
+                }
                 iconComponent={IconDelete16}
-                onClick={remove}
+                label={isConfirming ? i18n.t('Delete?') : undefined}
+                confirming={isConfirming}
+                onClick={onClick}
                 disabled={loading}
             />
             {error && (
diff --git a/src/components/Interpretations/InterpretationModal/CommentUpdateForm.js b/src/components/Interpretations/InterpretationModal/CommentUpdateForm.js
index 8d08d0422..32d0a4121 100644
--- a/src/components/Interpretations/InterpretationModal/CommentUpdateForm.js
+++ b/src/components/Interpretations/InterpretationModal/CommentUpdateForm.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { Button, spacers, colors } from '@dhis2/ui'
+import { Button } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { RichTextEditor } from '../../RichText/index.js'
@@ -21,37 +21,23 @@ export const CommentUpdateForm = ({ id, text, onCancel, onComplete }) => {
     const errorText = error ? i18n.t('Could not update comment') : ''
 
     return (
-        <div className="message">
-            <MessageEditorContainer currentUserName={currentUser.name}>
-                <RichTextEditor
-                    inputPlaceholder={i18n.t('Enter comment text')}
-                    onChange={setCommentText}
-                    value={commentText}
-                    disabled={loading}
-                    errorText={errorText}
-                />
-                <MessageButtonStrip>
-                    <Button loading={loading} primary small onClick={update}>
-                        {i18n.t('Update')}
-                    </Button>
-                    <Button
-                        disabled={loading}
-                        secondary
-                        small
-                        onClick={onCancel}
-                    >
-                        {i18n.t('Cancel')}
-                    </Button>
-                </MessageButtonStrip>
-            </MessageEditorContainer>
-            <style jsx>{`
-                .message {
-                    padding: 0 ${spacers.dp8} ${spacers.dp8};
-                    background-color: ${colors.grey100};
-                    border-radius: 5px;
-                }
-            `}</style>
-        </div>
+        <MessageEditorContainer currentUserName={currentUser.name}>
+            <RichTextEditor
+                inputPlaceholder={i18n.t('Enter comment text')}
+                onChange={setCommentText}
+                value={commentText}
+                disabled={loading}
+                errorText={errorText}
+            />
+            <MessageButtonStrip>
+                <Button loading={loading} primary small onClick={update}>
+                    {i18n.t('Update')}
+                </Button>
+                <Button disabled={loading} secondary small onClick={onCancel}>
+                    {i18n.t('Cancel')}
+                </Button>
+            </MessageButtonStrip>
+        </MessageEditorContainer>
     )
 }
 CommentUpdateForm.propTypes = {
diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
index 73bc13c8c..39aa9156e 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationModal.js
+++ b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -1,3 +1,4 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import {
     Modal,
@@ -12,6 +13,7 @@ import {
     CircularLoader,
 } from '@dhis2/ui'
 import cx from 'classnames'
+import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import css from 'styled-jsx/css'
@@ -59,6 +61,7 @@ const InterpretationModal = ({
 }) => {
     const modalContentWidth = useModalContentWidth()
     const modalContentCSS = getModalContentCSS(modalContentWidth)
+    const { fromServerDate } = useTimeZoneConversion()
     const currentUser = useInterpretationsCurrentUser()
     const {
         data: interpretation,
@@ -103,17 +106,17 @@ const InterpretationModal = ({
                 dataTest="interpretation-modal"
             >
                 <h1 className="title">
-                    <span className="ellipsis">
-                        {i18n.t(
-                            'Viewing interpretation: {{- visualisationName}}',
-                            {
-                                visualisationName:
-                                    visualization.displayName ||
-                                    visualization.name,
-                                nsSeparator: '^^',
-                            }
-                        )}
-                    </span>
+                    {interpretation?.created
+                        ? i18n.t(
+                              'Viewing interpretation data from {{- interpretationDate}}',
+                              {
+                                  interpretationDate: moment(
+                                      fromServerDate(interpretation.created)
+                                  ).format('LL'),
+                                  nsSeparator: '^^',
+                              }
+                          )
+                        : i18n.t('Viewing interpretation data')}
                 </h1>
                 <ModalContent className={modalContentCSS.className}>
                     <div className="container">
@@ -157,8 +160,8 @@ const InterpretationModal = ({
                     </div>
                 </ModalContent>
                 <ModalActions>
-                    <Button disabled={loading} onClick={onClose}>
-                        {i18n.t('Hide interpretation')}
+                    <Button secondary disabled={loading} onClick={onClose}>
+                        {i18n.t('Close')}
                     </Button>
                 </ModalActions>
                 {modalCSS.styles}
@@ -166,19 +169,11 @@ const InterpretationModal = ({
                 <style jsx>{`
                     .title {
                         color: ${colors.grey900};
-                        margin: 0px;
-                        padding: ${spacers.dp24} 0 ${spacers.dp4};
-                    }
-
-                    .ellipsis {
-                        display: inline-block;
-                        font-size: 20px;
+                        margin: 0 0 ${spacers.dp4} 0;
+                        padding: 0 0 ${spacers.dp4};
+                        font-size: 16px;
                         font-weight: 500;
-                        line-height: 24px;
-                        white-space: nowrap;
-                        width: 100%;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
+                        line-height: 21px;
                     }
 
                     .container {
@@ -200,7 +195,6 @@ const InterpretationModal = ({
                     }
 
                     .thread-wrap {
-                        padding-right: ${spacers.dp4};
                         flex-basis: 300px;
                         flex-shrink: 0;
                     }
diff --git a/src/components/Interpretations/InterpretationModal/InterpretationThread.js b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
index 711cb4cee..f0409177d 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationThread.js
+++ b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
@@ -1,7 +1,4 @@
-import { useTimeZoneConversion } from '@dhis2/app-runtime'
-import { IconClock16, colors } from '@dhis2/ui'
 import cx from 'classnames'
-import moment from 'moment'
 import PropTypes from 'prop-types'
 import React, { useRef, useEffect } from 'react'
 import { Interpretation, getInterpretationAccess } from '../common/index.js'
@@ -18,7 +15,6 @@ const InterpretationThread = ({
     dashboardRedirectUrl,
 }) => {
     const currentUser = useInterpretationsCurrentUser()
-    const { fromServerDate } = useTimeZoneConversion()
     const focusRef = useRef()
 
     useEffect(() => {
@@ -41,10 +37,6 @@ const InterpretationThread = ({
                 dashboard: !!dashboardRedirectUrl,
             })}
         >
-            <div className={'title'}>
-                <IconClock16 color={colors.grey700} />
-                {moment(fromServerDate(interpretation.created)).format('LLL')}
-            </div>
             {DownloadMenu && (
                 <DownloadMenu relativePeriodDate={interpretation.created} />
             )}
@@ -75,7 +67,6 @@ const InterpretationThread = ({
             )}
             <style jsx>{`
                 .thread {
-                    margin-top: var(--spacers-dp16);
                     overflow-y: auto;
                     scroll-behavior: smooth;
                 }
@@ -87,7 +78,7 @@ const InterpretationThread = ({
                 .container {
                     position: relative;
                     overflow: auto;
-                    max-height: calc(100vh - 285px);
+                    max-height: calc(100vh - 258px);
                     display: flex;
                     flex-direction: column;
                 }
@@ -120,21 +111,16 @@ const InterpretationThread = ({
                         rotation;
                 }
 
-                .title {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--spacers-dp8);
-                    color: var(--colors-grey900);
-                    font-size: 14px;
-                    line-height: 18px;
-                }
-
                 .comments {
-                    padding-left: 16px;
+                    margin-inline-start: var(--spacers-dp4);
+                    margin-block-start: var(--spacers-dp8);
+                    margin-block-end: var(--spacers-dp12);
+                    padding-inline-start: var(--spacers-dp12);
                     display: flex;
                     flex-direction: column;
-                    padding-top: var(--spacers-dp4);
-                    gap: var(--spacers-dp4);
+                    padding-block-start: var(--spacers-dp4);
+                    gap: var(--spacers-dp16);
+                    border-inline-start: 2px solid var(--colors-grey300);
                 }
 
                 @keyframes rotation {
diff --git a/src/components/Interpretations/InterpretationModal/useModalContentWidth.js b/src/components/Interpretations/InterpretationModal/useModalContentWidth.js
index 9ce9e1fde..cd05a2f3c 100644
--- a/src/components/Interpretations/InterpretationModal/useModalContentWidth.js
+++ b/src/components/Interpretations/InterpretationModal/useModalContentWidth.js
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { useDebounce } from '../../../modules/utils.js'
 
 const MODAL_SIDE_PADDING = 2 * 24
-const MODAL_SIDE_MARGINS = 2 * 128
+const MODAL_SIDE_MARGINS = 2 * 64
 
 const computeModalContentWidth = (windowWidth) => {
     return windowWidth - MODAL_SIDE_MARGINS - MODAL_SIDE_PADDING
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationForm.js b/src/components/Interpretations/InterpretationsUnit/InterpretationForm.js
index 1ce0c7764..4a9c0dd97 100644
--- a/src/components/Interpretations/InterpretationsUnit/InterpretationForm.js
+++ b/src/components/Interpretations/InterpretationsUnit/InterpretationForm.js
@@ -77,6 +77,7 @@ export const InterpretationForm = ({
                 </>
             ) : (
                 <Input
+                    dense
                     onFocus={() => setShowRichTextEditor(true)}
                     placeholder={inputPlaceholder}
                     disabled={disabled}
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationList.js b/src/components/Interpretations/InterpretationsUnit/InterpretationList.js
index e0d985ebf..f003f2f1a 100644
--- a/src/components/Interpretations/InterpretationsUnit/InterpretationList.js
+++ b/src/components/Interpretations/InterpretationsUnit/InterpretationList.js
@@ -1,6 +1,3 @@
-import { useTimeZoneConversion } from '@dhis2/app-runtime'
-import { IconCalendar24, colors, spacers } from '@dhis2/ui'
-import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Interpretation } from '../common/index.js'
@@ -12,18 +9,10 @@ export const InterpretationList = ({
     disabled,
     dashboardRedirectUrl,
 }) => {
-    const { fromServerDate } = useTimeZoneConversion()
-
     return (
         <ol className="interpretation-groups" data-test="interpretations-list">
             {Object.keys(interpretationIdsByDate).map((date) => (
                 <li key={date}>
-                    <div className="date-section">
-                        <IconCalendar24 color={colors.grey600} />
-                        <time dateTime={date} className="date-header">
-                            {moment(fromServerDate(date)).format('ll')}
-                        </time>
-                    </div>
                     <ol className="interpretation-list">
                         {interpretationIdsByDate[date].map(
                             (interpretationId) => (
@@ -41,37 +30,23 @@ export const InterpretationList = ({
                 </li>
             ))}
             <style jsx>{`
-                .date-section {
-                    display: flex;
-                    gap: ${spacers.dp8};
-                    align-items: center;
-                    margin-bottom: ${spacers.dp8};
-                }
-
-                .date-header {
-                    font-size: 14px;
-                    font-weight: 500;
-                    line-height: ${spacers.dp16};
-                    color: ${colors.grey800};
-                }
-
                 .interpretation-groups {
                     margin: 0;
                     padding: 0;
-                    padding-top: ${spacers.dp12};
+                    padding-block-start: 20px;
                     list-style: none;
                     display: flex;
                     flex-direction: column;
-                    gap: ${spacers.dp12};
+                    gap: 20px;
                 }
 
                 .interpretation-list {
                     margin: 0;
-                    padding-left: ${spacers.dp32};
+                    padding-inline-start: 0;
                     list-style: none;
                     display: flex;
                     flex-direction: column;
-                    gap: ${spacers.dp4};
+                    gap: 20px;
                 }
             `}</style>
         </ol>
diff --git a/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js b/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js
index 5fb555899..8d4dba744 100644
--- a/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js
+++ b/src/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js
@@ -92,12 +92,11 @@ export const InterpretationsUnit = ({
                 .container {
                     position: relative;
                     padding: ${spacers.dp16};
-                    border-bottom: 1px solid ${colors.grey400};
                     background-color: ${colors.white};
                 }
 
                 .expanded {
-                    padding-bottom: ${spacers.dp32};
+                    padding-block-end: ${spacers.dp24};
                 }
 
                 .loader {
@@ -111,6 +110,7 @@ export const InterpretationsUnit = ({
                     display: flex;
                     justify-content: space-between;
                     cursor: pointer;
+                    margin-block-end: ${spacers.dp12};
                 }
 
                 .title {
diff --git a/src/components/Interpretations/common/Interpretation/Interpretation.js b/src/components/Interpretations/common/Interpretation/Interpretation.js
index 347c824e2..531aae9f8 100644
--- a/src/components/Interpretations/common/Interpretation/Interpretation.js
+++ b/src/components/Interpretations/common/Interpretation/Interpretation.js
@@ -1,6 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
 import {
-    Button,
     SharingDialog,
     IconReply16,
     IconShare16,
@@ -71,6 +70,15 @@ export const Interpretation = ({
             created={interpretation.created}
             username={interpretation.createdBy.displayName}
         >
+            {shouldShowButton && (
+                <MessageIconButton
+                    tooltipContent={i18n.t('Open interpretation')}
+                    iconComponent={IconView16}
+                    onClick={() => onClick(id)}
+                    dataTest="interpretation-view-button"
+                    label={i18n.t('Open…')}
+                />
+            )}
             {!disabled && (
                 <MessageStatsBar>
                     <MessageIconButton
@@ -82,7 +90,11 @@ export const Interpretation = ({
                         iconComponent={IconThumbUp16}
                         onClick={toggleLike}
                         selected={isLikedByCurrentUser}
-                        count={interpretation.likes}
+                        label={
+                            interpretation.likes > 0
+                                ? interpretation.likes
+                                : undefined
+                        }
                         disabled={toggleLikeInProgress}
                         dataTest="interpretation-like-unlike-button"
                     />
@@ -90,7 +102,11 @@ export const Interpretation = ({
                         tooltipContent={tooltip}
                         iconComponent={IconReply16}
                         onClick={() => onReplyIconClick?.(id)}
-                        count={interpretation.comments.length}
+                        label={
+                            interpretation.comments.length > 0
+                                ? interpretation.comments.length
+                                : undefined
+                        }
                         dataTest="interpretation-reply-button"
                         viewOnly={isInThread && !interpretationAccess.comment}
                     />
@@ -146,18 +162,6 @@ export const Interpretation = ({
                     </>
                 </MessageStatsBar>
             )}
-            {shouldShowButton && (
-                <Button
-                    secondary
-                    small
-                    onClick={(_, event) => {
-                        event.stopPropagation()
-                        onClick(id)
-                    }}
-                >
-                    {i18n.t('See interpretation')}
-                </Button>
-            )}
         </Message>
     )
 }
diff --git a/src/components/Interpretations/common/Interpretation/InterpretationDeleteButton.js b/src/components/Interpretations/common/Interpretation/InterpretationDeleteButton.js
index 0cc345a07..4d25e3f29 100644
--- a/src/components/Interpretations/common/Interpretation/InterpretationDeleteButton.js
+++ b/src/components/Interpretations/common/Interpretation/InterpretationDeleteButton.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { useDeleteInterpretation } from '../../InterpretationsProvider/hooks.js'
 import { MessageIconButton } from '../index.js'
+import { useConfirmClick } from '../useConfirmClick.js'
 
 const InterpretationDeleteButton = ({ id, onComplete }) => {
     const { show: showErrorAlert } = useAlert(
@@ -16,12 +17,19 @@ const InterpretationDeleteButton = ({ id, onComplete }) => {
         onComplete,
         showErrorAlert,
     })
+    const { isConfirming, onClick } = useConfirmClick(remove)
 
     return (
         <MessageIconButton
-            tooltipContent={i18n.t('Delete')}
+            tooltipContent={
+                isConfirming
+                    ? i18n.t('Click again to delete')
+                    : i18n.t('Delete')
+            }
             iconComponent={IconDelete16}
-            onClick={remove}
+            label={isConfirming ? i18n.t('Delete?') : undefined}
+            confirming={isConfirming}
+            onClick={onClick}
             disabled={loading}
             dataTest="interpretation-delete-button"
         />
diff --git a/src/components/Interpretations/common/Interpretation/InterpretationSharingLink.js b/src/components/Interpretations/common/Interpretation/InterpretationSharingLink.js
index f13f6a94a..55de7c7bb 100644
--- a/src/components/Interpretations/common/Interpretation/InterpretationSharingLink.js
+++ b/src/components/Interpretations/common/Interpretation/InterpretationSharingLink.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { SharingDialog, colors, spacers } from '@dhis2/ui'
+import { Button, SharingDialog } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
@@ -8,12 +8,13 @@ const InterpretationSharingLink = ({ type, id }) => {
     return (
         <>
             <div className="container">
-                <span
-                    className="link"
+                <Button
+                    secondary
+                    small
                     onClick={() => setShowSharingDialog(true)}
                 >
                     {i18n.t('Manage sharing')}
-                </span>
+                </Button>
             </div>
             {showSharingDialog && (
                 <SharingDialog
@@ -25,18 +26,7 @@ const InterpretationSharingLink = ({ type, id }) => {
             )}
             <style jsx>{`
                 .container {
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-end;
-                    gap: ${spacers.dp4};
-                    margin-top: ${spacers.dp8};
-                    font-size: 13px;
-                    color: ${colors.grey800};
-                    cursor: pointer;
-                }
-
-                .link {
-                    text-decoration: underline;
+                    margin-inline-start: auto;
                 }
             `}</style>
         </>
diff --git a/src/components/Interpretations/common/Interpretation/InterpretationUpdateForm.js b/src/components/Interpretations/common/Interpretation/InterpretationUpdateForm.js
index 1d70deb01..a360f6dff 100644
--- a/src/components/Interpretations/common/Interpretation/InterpretationUpdateForm.js
+++ b/src/components/Interpretations/common/Interpretation/InterpretationUpdateForm.js
@@ -1,6 +1,6 @@
 import { useAlert } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Button, spacers, colors } from '@dhis2/ui'
+import { Button } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { RichTextEditor } from '../../../RichText/index.js'
@@ -38,45 +38,32 @@ export const InterpretationUpdateForm = ({
         : ''
 
     return (
-        <div className="message">
-            <MessageEditorContainer currentUserName={currentUser.name}>
-                <RichTextEditor
-                    inputPlaceholder={i18n.t('Enter interpretation text')}
-                    onChange={setInterpretationText}
-                    value={interpretationText}
-                    disabled={loading}
-                    errorText={errorText}
-                />
+        <MessageEditorContainer currentUserName={currentUser.name}>
+            <RichTextEditor
+                inputPlaceholder={i18n.t('Enter interpretation text')}
+                onChange={setInterpretationText}
+                value={interpretationText}
+                disabled={loading}
+                errorText={errorText}
+            />
+
+            <MessageButtonStrip>
+                <Button
+                    loading={loading}
+                    primary
+                    small
+                    onClick={() => update({ interpretationText })}
+                >
+                    {i18n.t('Update')}
+                </Button>
+                <Button disabled={loading} secondary small onClick={onComplete}>
+                    {i18n.t('Cancel')}
+                </Button>
                 {showSharingLink && (
                     <InterpretationSharingLink id={id} type="interpretation" />
                 )}
-                <MessageButtonStrip>
-                    <Button
-                        loading={loading}
-                        primary
-                        small
-                        onClick={() => update({ interpretationText })}
-                    >
-                        {i18n.t('Update')}
-                    </Button>
-                    <Button
-                        disabled={loading}
-                        secondary
-                        small
-                        onClick={onComplete}
-                    >
-                        {i18n.t('Cancel')}
-                    </Button>
-                </MessageButtonStrip>
-            </MessageEditorContainer>
-            <style jsx>{`
-                .message {
-                    padding: 0 ${spacers.dp8} ${spacers.dp8};
-                    background-color: ${colors.grey100};
-                    border-radius: 5px;
-                }
-            `}</style>
-        </div>
+            </MessageButtonStrip>
+        </MessageEditorContainer>
     )
 }
 InterpretationUpdateForm.propTypes = {
diff --git a/src/components/Interpretations/common/Message/Message.js b/src/components/Interpretations/common/Message/Message.js
index 94bd37b5a..539a98ebd 100644
--- a/src/components/Interpretations/common/Message/Message.js
+++ b/src/components/Interpretations/common/Message/Message.js
@@ -1,5 +1,5 @@
 import { useTimeZoneConversion } from '@dhis2/app-runtime'
-import { UserAvatar, spacers, colors } from '@dhis2/ui'
+import { spacers, colors, UserAvatar } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -9,46 +9,68 @@ const Message = ({ children, text, created, username }) => {
     const { fromServerDate } = useTimeZoneConversion()
     return (
         <li className="container">
-            <div className="header">
-                <UserAvatar name={username} extrasmall />
-                {username}
-                <time dateTime={created}>
-                    {moment(fromServerDate(created)).format('lll')}
-                </time>
+            <div className="avatar">
+                <UserAvatar name={username} small />
             </div>
-            <div className="content">
-                <RichTextParser>{text}</RichTextParser>
+            <div className="main">
+                <div className="header">
+                    <span className="username">{username}</span>
+                    <time dateTime={created}>
+                        {moment(fromServerDate(created)).format(
+                            'MMM D, YYYY [·] HH:mm'
+                        )}
+                    </time>
+                </div>
+                <div className="content">
+                    <RichTextParser>{text}</RichTextParser>
+                </div>
+                <div className="footer">{children}</div>
             </div>
-            <div className="footer">{children}</div>
             <style jsx>{`
                 .container {
-                    padding: ${spacers.dp8};
-                    background-color: ${colors.grey100};
-                    border-radius: 5px;
                     display: flex;
-                    flex-direction: column;
+                    flex-direction: row;
                     gap: ${spacers.dp8};
+                    padding: 0;
+                }
+
+                .avatar {
+                    flex-shrink: 0;
+                    padding-top: 6px;
+                }
+
+                .main {
+                    flex: 1;
+                    min-width: 0;
                 }
 
                 .header {
                     display: flex;
-                    gap: 6px;
-                    align-items: center;
-                    font-size: 13px;
-                    line-height: 16px;
+                    flex-direction: column;
+                    gap: 2px;
+                    align-items: baseline;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 18px;
                     color: ${colors.grey900};
+                    margin-block-end: ${spacers.dp8};
                 }
 
                 .header time {
-                    font-size: 12px;
+                    font-size: 13px;
+                    line-height: 16px;
+                    font-weight: 400;
                     color: ${colors.grey600};
                 }
 
                 .content {
                     font-size: 14px;
-                    line-height: 19px;
+                    line-height: 21px;
                     color: ${colors.grey900};
                     word-break: break-word;
+                }
+
+                .content :global(p) {
                     white-space: pre-line;
                 }
 
@@ -58,9 +80,10 @@ const Message = ({ children, text, created, username }) => {
 
                 .footer {
                     display: flex;
-                    flex-direction: column;
+                    flex-direction: row;
                     align-items: flex-start;
-                    gap: ${spacers.dp8};
+                    gap: ${spacers.dp4};
+                    margin-block-start: ${spacers.dp4};
                 }
             `}</style>
         </li>
diff --git a/src/components/Interpretations/common/Message/MessageButtonStrip.js b/src/components/Interpretations/common/Message/MessageButtonStrip.js
index f2768c968..685e518f2 100644
--- a/src/components/Interpretations/common/Message/MessageButtonStrip.js
+++ b/src/components/Interpretations/common/Message/MessageButtonStrip.js
@@ -8,8 +8,9 @@ const MessageButtonStrip = ({ children }) => (
         <style jsx>{`
             .container {
                 display: flex;
-                gap: ${spacers.dp8};
-                margin-top: ${spacers.dp8};
+                flex-wrap: wrap-reverse;
+                gap: ${spacers.dp4};
+                margin-block-start: ${spacers.dp4};
             }
         `}</style>
     </div>
diff --git a/src/components/Interpretations/common/Message/MessageEditorContainer.js b/src/components/Interpretations/common/Message/MessageEditorContainer.js
index 7f250a649..43eeaa788 100644
--- a/src/components/Interpretations/common/Message/MessageEditorContainer.js
+++ b/src/components/Interpretations/common/Message/MessageEditorContainer.js
@@ -5,17 +5,17 @@ import React from 'react'
 const MessageEditorContainer = ({ children, currentUserName, dataTest }) => (
     <div className="container" data-test={dataTest}>
         <div className="avatar">
-            <UserAvatar name={currentUserName} medium />
+            <UserAvatar name={currentUserName} small />
         </div>
         <div className="editor">{children}</div>
         <style jsx>{`
             .container {
                 display: flex;
                 gap: ${spacers.dp8};
-                margin-top: ${spacers.dp12};
             }
             .avatar {
                 flex-grow: 0;
+                margin-block-start: 3px;
             }
             .editor {
                 flex-grow: 1;
diff --git a/src/components/Interpretations/common/Message/MessageIconButton.js b/src/components/Interpretations/common/Message/MessageIconButton.js
index bbe0e87b0..f851eb1ad 100644
--- a/src/components/Interpretations/common/Message/MessageIconButton.js
+++ b/src/components/Interpretations/common/Message/MessageIconButton.js
@@ -1,4 +1,4 @@
-import { Tooltip, colors, spacers, theme } from '@dhis2/ui'
+import { Tooltip, colors, theme } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,7 +8,8 @@ const MessageIconButton = ({
     disabled,
     onClick,
     selected,
-    count,
+    confirming,
+    label,
     iconComponent: Icon,
     dataTest,
     viewOnly,
@@ -26,12 +27,18 @@ const MessageIconButton = ({
                         event.stopPropagation()
                         onClick()
                     }}
-                    className={cx('button', { selected, viewOnly })}
+                    className={cx('button', {
+                        selected,
+                        viewOnly,
+                        confirming,
+                    })}
                     disabled={disabled}
                     data-test={dataTest}
                 >
-                    {count && count}
                     <Icon />
+                    {label !== undefined && label !== null && (
+                        <span className="label">{label}</span>
+                    )}
                 </button>
                 <style jsx>{`
                     .wrapper {
@@ -43,11 +50,15 @@ const MessageIconButton = ({
                         cursor: pointer;
                         display: inline-flex;
                         flex-direction: row;
-                        gap: ${spacers.dp4};
+                        gap: 3px;
                         align-items: center;
-                        font-size: 12px;
-                        line-height: 14px;
+
+                        font-size: 13px;
+                        line-height: 1;
                         color: ${colors.grey700};
+                        border: 1px solid transparent;
+                        border-radius: 5px;
+                        padding: 3px 5px;
                     }
 
                     .viewOnly {
@@ -56,11 +67,13 @@ const MessageIconButton = ({
 
                     .button.selected {
                         color: ${colors.teal600};
-                        font-weight: 500;
+                        font-weight: 400;
+                        background-color: ${colors.teal050};
                     }
 
                     .button:hover {
                         color: ${colors.grey900};
+                        background-color: ${colors.grey200};
                     }
 
                     .button.selected:hover {
@@ -75,6 +88,24 @@ const MessageIconButton = ({
                         color: ${colors.teal700};
                     }
 
+                    .button.confirming {
+                        color: ${colors.red700};
+                        background-color: ${colors.red100};
+                    }
+
+                    .button.confirming :global(svg) {
+                        color: ${colors.red700};
+                    }
+
+                    .button.confirming:hover {
+                        color: ${colors.red800};
+                        background-color: ${colors.red200};
+                    }
+
+                    .button.confirming:hover :global(svg) {
+                        color: ${colors.red800};
+                    }
+
                     .button:disabled {
                         color: ${theme.disabled};
                         cursor: not-allowed;
@@ -83,6 +114,11 @@ const MessageIconButton = ({
                     .button:disabled :global(svg) {
                         color: ${theme.disabled};
                     }
+
+                    .button:focus-visible {
+                        outline: 2px solid ${theme.focus};
+                        outline-offset: -2px;
+                    }
                 `}</style>
             </span>
         )}
@@ -93,9 +129,10 @@ MessageIconButton.propTypes = {
     iconComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
         .isRequired,
     tooltipContent: PropTypes.string.isRequired,
-    count: PropTypes.number,
+    confirming: PropTypes.bool,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     selected: PropTypes.bool,
     viewOnly: PropTypes.bool,
     onClick: PropTypes.func,
diff --git a/src/components/Interpretations/common/Message/MessageInput.js b/src/components/Interpretations/common/Message/MessageInput.js
index e000f29e2..2e202832a 100644
--- a/src/components/Interpretations/common/Message/MessageInput.js
+++ b/src/components/Interpretations/common/Message/MessageInput.js
@@ -13,7 +13,8 @@ const MessageInput = forwardRef((props, ref) => (
                 user-select: text;
                 color: ${colors.grey900};
                 background-color: white;
-                padding: 12px 11px 10px;
+                padding: 7px 8px;
+                max-height: 32px;
                 outline: 0;
                 border: 1px solid ${colors.grey500};
                 border-radius: 3px;
diff --git a/src/components/Interpretations/common/Message/MessageStatsBar.js b/src/components/Interpretations/common/Message/MessageStatsBar.js
index b83e604bd..772f2d3c2 100644
--- a/src/components/Interpretations/common/Message/MessageStatsBar.js
+++ b/src/components/Interpretations/common/Message/MessageStatsBar.js
@@ -8,7 +8,8 @@ const MessageStatsBar = ({ children }) => (
         <style jsx>{`
             .container {
                 display: flex;
-                gap: ${spacers.dp12};
+                align-items: flex-start;
+                gap: ${spacers.dp4};
             }
         `}</style>
     </div>
diff --git a/src/components/Interpretations/common/useConfirmClick.js b/src/components/Interpretations/common/useConfirmClick.js
new file mode 100644
index 000000000..21e98360b
--- /dev/null
+++ b/src/components/Interpretations/common/useConfirmClick.js
@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const CONFIRM_TIMEOUT_MS = 3000
+
+const useConfirmClick = (action) => {
+    const [isConfirming, setIsConfirming] = useState(false)
+    const timeoutRef = useRef(null)
+
+    const clearResetTimer = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current)
+            timeoutRef.current = null
+        }
+    }, [])
+
+    useEffect(() => clearResetTimer, [clearResetTimer])
+
+    const onClick = useCallback(() => {
+        if (isConfirming) {
+            clearResetTimer()
+            setIsConfirming(false)
+            action()
+        } else {
+            setIsConfirming(true)
+            timeoutRef.current = setTimeout(() => {
+                timeoutRef.current = null
+                setIsConfirming(false)
+            }, CONFIRM_TIMEOUT_MS)
+        }
+    }, [isConfirming, action, clearResetTimer])
+
+    return { isConfirming, onClick }
+}
+
+export { useConfirmClick }
diff --git a/src/components/RichText/Editor/Editor.js b/src/components/RichText/Editor/Editor.js
index 82ab625df..10bcc0050 100644
--- a/src/components/RichText/Editor/Editor.js
+++ b/src/components/RichText/Editor/Editor.js
@@ -1,14 +1,13 @@
 import i18n from '@dhis2/d2-i18n'
 import {
-    Button,
     Popover,
     Tooltip,
     Help,
-    IconAt24,
-    IconFaceAdd24,
-    IconLink24,
-    IconTextBold24,
-    IconTextItalic24,
+    IconAt16,
+    IconFaceAdd16,
+    IconLink16,
+    IconTextBold16,
+    IconTextItalic16,
     colors,
 } from '@dhis2/ui'
 import cx from 'classnames'
@@ -34,6 +33,7 @@ import {
     toolbarClasses,
     tooltipAnchorClasses,
     emojisPopoverClasses,
+    toolbarButtonClasses,
 } from './styles/Editor.style.js'
 
 const EmojisPopover = ({ onInsertMarkdown, onClose, reference }) => (
@@ -64,7 +64,12 @@ EmojisPopover.propTypes = {
 
 const IconButtonWithTooltip = ({ tooltipContent, disabled, icon, onClick }) => (
     <>
-        <Tooltip content={tooltipContent} placement="bottom" closeDelay={200}>
+        <Tooltip
+            content={tooltipContent}
+            placement="top"
+            openDelay={500}
+            closeDelay={100}
+        >
             {({ ref, onMouseOver, onMouseOut }) => (
                 <span
                     ref={ref}
@@ -72,18 +77,20 @@ const IconButtonWithTooltip = ({ tooltipContent, disabled, icon, onClick }) => (
                     onMouseOut={onMouseOut}
                     className="tooltip"
                 >
-                    <Button
-                        secondary
-                        small
+                    <button
+                        className="toolbarButton"
                         disabled={disabled}
-                        icon={icon}
                         onClick={onClick}
                         aria-label={tooltipContent}
-                    />
+                        type="button"
+                    >
+                        {icon}
+                    </button>
                 </span>
             )}
         </Tooltip>
         <style jsx>{tooltipAnchorClasses}</style>
+        <style jsx>{toolbarButtonClasses}</style>
     </>
 )
 
@@ -114,32 +121,32 @@ const Toolbar = ({
                         <IconButtonWithTooltip
                             tooltipContent={i18n.t('Bold text')}
                             disabled={disabled}
-                            icon={<IconTextBold24 color={iconColor} />}
+                            icon={<IconTextBold16 color={iconColor} />}
                             onClick={() => onInsertMarkdown(BOLD)}
                         />
                         <IconButtonWithTooltip
                             tooltipContent={i18n.t('Italic text')}
                             disabled={disabled}
-                            icon={<IconTextItalic24 color={iconColor} />}
+                            icon={<IconTextItalic16 color={iconColor} />}
                             onClick={() => onInsertMarkdown(ITALIC)}
                         />
                         <IconButtonWithTooltip
                             tooltipContent={i18n.t('Link to a URL')}
                             disabled={disabled}
-                            icon={<IconLink24 color={iconColor} />}
+                            icon={<IconLink16 color={iconColor} />}
                             onClick={() => onInsertMarkdown(LINK)}
                         />
                         <IconButtonWithTooltip
                             tooltipContent={i18n.t('Mention a user')}
                             disabled={disabled}
-                            icon={<IconAt24 color={iconColor} />}
+                            icon={<IconAt16 color={iconColor} />}
                             onClick={() => onInsertMarkdown(MENTION)}
                         />
                         <span ref={emojisButtonRef} className="tooltip">
                             <IconButtonWithTooltip
                                 tooltipContent={i18n.t('Add emoji')}
                                 disabled={disabled}
-                                icon={<IconFaceAdd24 color={iconColor} />}
+                                icon={<IconFaceAdd16 color={iconColor} />}
                                 onClick={() => setEmojisPopoverIsOpen(true)}
                             />
                         </span>
@@ -156,30 +163,31 @@ const Toolbar = ({
                     </div>
 
                     <div className="sideActions">
-                        <Button
-                            secondary
-                            small
+                        <button
+                            className="toolbarButton"
                             disabled={previewButtonDisabled || disabled}
                             onClick={onTogglePreview}
+                            type="button"
                         >
                             {i18n.t('Preview')}
-                        </Button>
+                        </button>
                     </div>
                 </div>
             ) : (
                 <div className="previewWrapper">
-                    <Button
-                        secondary
-                        small
+                    <button
+                        className="toolbarButton"
                         onClick={onTogglePreview}
                         disabled={disabled}
+                        type="button"
                     >
                         {i18n.t('Back to write mode')}
-                    </Button>
+                    </button>
                 </div>
             )}
             <style jsx>{tooltipAnchorClasses}</style>
             <style jsx>{toolbarClasses}</style>
+            <style jsx>{toolbarButtonClasses}</style>
         </div>
     )
 }
@@ -279,6 +287,7 @@ export const Editor = forwardRef(
                                 placeholder={inputPlaceholder}
                                 disabled={disabled}
                                 value={value}
+                                rows={5}
                                 onChange={(event) =>
                                     onChange(event.target.value)
                                 }
diff --git a/src/components/RichText/Editor/styles/Editor.style.js b/src/components/RichText/Editor/styles/Editor.style.js
index 607be4c8d..306864e8b 100644
--- a/src/components/RichText/Editor/styles/Editor.style.js
+++ b/src/components/RichText/Editor/styles/Editor.style.js
@@ -10,14 +10,21 @@ export const mainClasses = css`
     }
 
     .preview {
-        padding: ${spacers.dp8} ${spacers.dp12};
+        padding: 0 ${spacers.dp8} ${spacers.dp8} ${spacers.dp8};
         font-size: 14px;
         line-height: ${spacers.dp16};
         color: ${colors.grey900};
+        border: 1px solid ${colors.grey500};
+        border-block-start: none;
+        border-radius: 0 0 3px 3px;
         overflow-y: auto;
         scroll-behavior: smooth;
     }
 
+    .preview :global(p:first-of-type) {
+        margin: 0;
+    }
+
     .edit {
         width: 100%;
         height: 100%;
@@ -28,19 +35,20 @@ export const mainClasses = css`
         width: 100%;
         height: 100%;
         box-sizing: border-box;
-        padding: ${spacers.dp8} 15px;
+        padding: ${spacers.dp4} ${spacers.dp8} ${spacers.dp8} ${spacers.dp8};
 
         color: ${colors.grey900};
         background-color: ${colors.white};
 
         border: 1px solid ${colors.grey500};
-        border-radius: 3px;
-        box-shadow: inset 0 0 0 1px rgba(102, 113, 123, 0.15),
-            inset 0 1px 2px 0 rgba(102, 113, 123, 0.1);
+        border-block-start: none;
+        border-radius: 0 0 3px 3px;
+
+        box-shadow: inset 0 0 1px 0 rgba(48, 54, 60, 0.1);
         outline: 0;
 
         font-size: 14px;
-        line-height: ${spacers.dp16};
+        line-height: 21px;
         user-select: text;
         resize: none;
     }
@@ -49,13 +57,8 @@ export const mainClasses = css`
         resize: vertical;
     }
 
-    .textarea:focus {
-        outline: none;
-        box-shadow: 0 0 0 3px ${theme.focus};
-        width: calc(100% - 6px);
-        height: calc(100% - 3px);
-        padding: ${spacers.dp8} ${spacers.dp12};
-        margin-left: 3px;
+    .textarea::placeholder {
+        color: ${colors.grey600};
     }
 
     .textarea:disabled {
@@ -68,10 +71,10 @@ export const mainClasses = css`
 
 export const toolbarClasses = css`
     .toolbar {
-        background: ${colors.grey050};
-        border-radius: 3px;
-        border: 1px solid ${colors.grey300};
-        margin-bottom: ${spacers.dp4};
+        background: ${colors.white};
+        border-radius: 3px 3px 0 0;
+        border: 1px solid ${colors.grey500};
+        border-bottom-color: transparent;
     }
 
     .actionsWrapper {
@@ -80,13 +83,13 @@ export const toolbarClasses = css`
         gap: ${spacers.dp4};
         align-items: center;
         justify-content: space-between;
-        padding: ${spacers.dp4};
+        padding: ${spacers.dp4} ${spacers.dp4} 0 ${spacers.dp4};
     }
 
     .mainActions {
         display: flex;
-        gap: ${spacers.dp4};
-        margin-top: ${spacers.dp2};
+        gap: 0;
+        margin-top: 0;
     }
 
     .sideActions {
@@ -106,6 +109,41 @@ export const tooltipAnchorClasses = css`
     }
 `
 
+export const toolbarButtonClasses = css`
+    .toolbarButton {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: ${spacers.dp4} 6px;
+        background: none;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+        color: ${colors.grey700};
+        font-size: 13px;
+        font-family: inherit;
+        line-height: 1.4;
+    }
+
+    .toolbarButton:hover:not(:disabled) {
+        background-color: ${colors.grey200};
+    }
+
+    .toolbarButton:active:not(:disabled) {
+        background-color: ${colors.grey300};
+    }
+
+    .toolbarButton:disabled {
+        cursor: not-allowed;
+        color: ${colors.grey500};
+    }
+
+    .toolbarButton:focus-visible {
+        outline: 2px solid ${theme.focus};
+        outline-offset: -2px;
+    }
+`
+
 export const emojisPopoverClasses = css`
     .emojisList {
         display: flex;

From 8bb39aaec62e3eeb4f683301e45075e676b782fe Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 20 Apr 2026 12:49:01 +0200
Subject: [PATCH 3/3] chore: change storybook error variable usage

---
 src/__demo__/InterpretationModal.stories.js  | 4 ++--
 src/__demo__/InterpretationThread.stories.js | 4 ++--
 src/__demo__/InterpretationsUnit.stories.js  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/__demo__/InterpretationModal.stories.js b/src/__demo__/InterpretationModal.stories.js
index 446abd8a0..04789cb74 100644
--- a/src/__demo__/InterpretationModal.stories.js
+++ b/src/__demo__/InterpretationModal.stories.js
@@ -303,7 +303,7 @@ WithManyComments.story = {
     name: 'With many comments',
 }
 
-export const Error = () => (
+export const ErrorState = () => (
     <ModalStory
         interpretationsResolver={() =>
             Promise.reject(
@@ -328,6 +328,6 @@ export const Error = () => (
     </ModalStory>
 )
 
-Error.story = {
+ErrorState.story = {
     name: 'Error',
 }
diff --git a/src/__demo__/InterpretationThread.stories.js b/src/__demo__/InterpretationThread.stories.js
index 4ee6c539d..493ed664c 100644
--- a/src/__demo__/InterpretationThread.stories.js
+++ b/src/__demo__/InterpretationThread.stories.js
@@ -250,7 +250,7 @@ Loading.story = {
     name: 'Loading',
 }
 
-export const Error = () => (
+export const ErrorState = () => (
     <ThreadStory
         interpretationsResolver={() =>
             Promise.reject(
@@ -267,6 +267,6 @@ export const Error = () => (
     </ThreadStory>
 )
 
-Error.story = {
+ErrorState.story = {
     name: 'Error',
 }
diff --git a/src/__demo__/InterpretationsUnit.stories.js b/src/__demo__/InterpretationsUnit.stories.js
index c5f392796..5f610cc86 100644
--- a/src/__demo__/InterpretationsUnit.stories.js
+++ b/src/__demo__/InterpretationsUnit.stories.js
@@ -100,7 +100,7 @@ Loading.story = {
     name: 'Loading',
 }
 
-export const Error = () => (
+export const ErrorState = () => (
     <InterpretationsStory
         interpretationsResolver={() =>
             Promise.reject(
@@ -114,7 +114,7 @@ export const Error = () => (
     </InterpretationsStory>
 )
 
-Error.story = {
+ErrorState.story = {
     name: 'Error',
 }