From 0609b88eb2038fbf375b8f121f6e067a854f78be Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 10:09:59 +0200
Subject: [PATCH 01/19] fix: sidebar padding

---
 i18n/en.pot                                      | 4 ++--
 src/components/sidebar/styles/sidebar.module.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 654d1f8c..71a3bd19 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-06-01T14:14:08.533Z\n"
-"PO-Revision-Date: 2026-06-01T14:14:08.533Z\n"
+"POT-Creation-Date: 2026-06-02T08:10:01.263Z\n"
+"PO-Revision-Date: 2026-06-02T08:10:01.263Z\n"
 
 msgid "Add to {{- axisName}}"
 msgstr "Add to {{- axisName}}"
diff --git a/src/components/sidebar/styles/sidebar.module.css b/src/components/sidebar/styles/sidebar.module.css
index c34f43f0..ad398b33 100644
--- a/src/components/sidebar/styles/sidebar.module.css
+++ b/src/components/sidebar/styles/sidebar.module.css
@@ -8,7 +8,6 @@
     block-size: calc(100% - 8px);
     border: 1px solid var(--colors-grey400);
     border-radius: 5px;
-    padding-block-end: 4px;
     background-color: var(--colors-grey100);
     overflow: hidden;
 }
@@ -61,6 +60,7 @@
     gap: 8px;
     padding-block-start: 8px;
     padding-inline: 4px;
+    padding-block-end: 4px;
     margin-inline-end: 2px;
     transition: scrollbar-color 0.18s ease;
 }

From 9823125f17f408680ef07ff7dbbe3043b5b9963a Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 10:26:21 +0200
Subject: [PATCH 02/19] fix: empty chip style

---
 src/components/layout-panel/axis/styles/chip.module.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/layout-panel/axis/styles/chip.module.css b/src/components/layout-panel/axis/styles/chip.module.css
index a37b8e2f..16e1d07d 100644
--- a/src/components/layout-panel/axis/styles/chip.module.css
+++ b/src/components/layout-panel/axis/styles/chip.module.css
@@ -42,6 +42,14 @@
     color: var(--colors-grey900);
 }
 
+.chipEmpty .content button {
+    background-color: var(--colors-grey100);
+}
+
+.chipEmpty .content button:hover {
+    background-color: var(--colors-grey200);
+}
+
 .chipEmpty .secondary {
     color: var(--colors-grey600);
 }

From 35cb2886614ff2bd75823853485f219060949f00 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 11:02:00 +0200
Subject: [PATCH 03/19] fix: titlebar edited suffix style

---
 .../toolbar/title-bar/styles/title-bar.module.css   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/toolbar/title-bar/styles/title-bar.module.css b/src/components/toolbar/title-bar/styles/title-bar.module.css
index ca1ab711..066d090a 100644
--- a/src/components/toolbar/title-bar/styles/title-bar.module.css
+++ b/src/components/toolbar/title-bar/styles/title-bar.module.css
@@ -43,13 +43,16 @@
 }
 
 .suffix.edited {
-    color: var(--colors-grey800);
-    padding: 2px 4px;
-    border-radius: 3px;
-    background-color: var(--colors-grey200);
-    margin-block-start: -1px;
+    color: var(--colors-grey600);
+    margin-block-start: 2px;
+    margin-inline-start: 4px;
     font-size: 11px;
     letter-spacing: -0.2px;
     font-family: monospace;
     line-height: normal;
 }
+
+.suffix.edited::before {
+    content: '·';
+    margin-inline-end: 4px;
+}

From 8f01ad12aa33c041bd8f2e4f83fe225a3c8e9f23 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 12:16:30 +0200
Subject: [PATCH 04/19] fix: card styles, disabled states

---
 .../sidebar/dimension-card/dimension-card-subsection.tsx    | 3 +--
 .../dimension-card/styles/dimension-card-header.module.css  | 6 +++---
 .../styles/dimension-card-subsection.module.css             | 5 ++++-
 .../sidebar/dimension-card/styles/dimension-card.module.css | 6 +++++-
 .../sidebar/dimension-card/styles/dimension-list.module.css | 2 +-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/dimension-card/dimension-card-subsection.tsx b/src/components/sidebar/dimension-card/dimension-card-subsection.tsx
index 832852c3..13226581 100644
--- a/src/components/sidebar/dimension-card/dimension-card-subsection.tsx
+++ b/src/components/sidebar/dimension-card/dimension-card-subsection.tsx
@@ -31,11 +31,10 @@ export const DimensionsCardSubsection: FC<DimensionsCardSubsectionProps> = ({
                 type="button"
                 className={cx(classes.header, {
                     [classes.collapsed]: isCollapsed,
+                    [classes.disabled]: isDisabled,
                 })}
                 onClick={handleToggle}
                 aria-expanded={!isCollapsed}
-                disabled={isDisabled}
-                tabIndex={isDisabled ? -1 : 0}
                 data-test="dimension-card-subsection-header"
             >
                 {<CollapseIcon isCollapsed={isCollapsed} />}
diff --git a/src/components/sidebar/dimension-card/styles/dimension-card-header.module.css b/src/components/sidebar/dimension-card/styles/dimension-card-header.module.css
index 13707164..28319da4 100644
--- a/src/components/sidebar/dimension-card/styles/dimension-card-header.module.css
+++ b/src/components/sidebar/dimension-card/styles/dimension-card-header.module.css
@@ -4,7 +4,7 @@
     min-block-size: 29px;
     display: flex;
     align-items: center;
-    background-color: var(--colors-white);
+    background-color: transparent;
     border-radius: 4px 4px 0 0;
     padding: 10px 6px 10px 4px;
     cursor: pointer;
@@ -20,7 +20,7 @@
     background-color: var(--colors-grey100);
 }
 .container.disabled:hover {
-    background-color: var(--colors-grey300);
+    background-color: var(--colors-grey100);
 }
 .container:focus {
     outline: 3px solid var(--theme-focus);
@@ -38,7 +38,7 @@
     font-size: 13px;
     line-height: 16px;
     font-weight: 500;
-    color: var(--colors-grey700);
+    color: var(--colors-grey800);
 }
 
 .count {
diff --git a/src/components/sidebar/dimension-card/styles/dimension-card-subsection.module.css b/src/components/sidebar/dimension-card/styles/dimension-card-subsection.module.css
index 2ca39c12..dde1b9a1 100644
--- a/src/components/sidebar/dimension-card/styles/dimension-card-subsection.module.css
+++ b/src/components/sidebar/dimension-card/styles/dimension-card-subsection.module.css
@@ -17,6 +17,9 @@
     border-end-start-radius: 4px;
     border-end-end-radius: 4px;
 }
+.header.disabled {
+    opacity: 0.5;
+}
 .header:hover {
     background-color: var(--colors-grey100);
 }
@@ -36,7 +39,7 @@
     font-size: 13px;
     line-height: 16px;
     font-weight: 500;
-    color: var(--colors-grey900);
+    color: var(--colors-grey800);
 }
 .count {
     flex-grow: 0;
diff --git a/src/components/sidebar/dimension-card/styles/dimension-card.module.css b/src/components/sidebar/dimension-card/styles/dimension-card.module.css
index ef112ec0..950083ff 100644
--- a/src/components/sidebar/dimension-card/styles/dimension-card.module.css
+++ b/src/components/sidebar/dimension-card/styles/dimension-card.module.css
@@ -7,7 +7,11 @@
 }
 .container.isDisabled {
     border-color: var(--colors-grey300);
-    background-color: var(--colors-grey050);
+    background-color: color-mix(
+        in srgb,
+        var(--colors-white) 50%,
+        transparent 50%
+    );
 }
 .container:not(.isDisabled):hover {
     border-color: #b7c4d2;
diff --git a/src/components/sidebar/dimension-card/styles/dimension-list.module.css b/src/components/sidebar/dimension-card/styles/dimension-list.module.css
index 8a885df8..adcdf5ff 100644
--- a/src/components/sidebar/dimension-card/styles/dimension-list.module.css
+++ b/src/components/sidebar/dimension-card/styles/dimension-list.module.css
@@ -35,7 +35,7 @@
     line-height: 16px;
 }
 .noResults {
-    padding: 0 8px;
+    padding: 0 8px 4px;
     color: var(--colors-grey600);
     text-align: start;
     font-size: 12px;

From c7a66340551307bea15c9634a3890ba51e3aef03 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 13:49:37 +0200
Subject: [PATCH 05/19] fix: program indicator card disabled notice

---
 i18n/en.pot                                   | 12 +++-----
 .../dimension-card/card-disabled-notice.tsx   | 12 ++++----
 .../sidebar/dimension-card/dimension-card.tsx |  3 +-
 .../styles/card-disabled-notice.module.css    | 30 +++++++++++++++++++
 .../styles/dimension-card.module.css          |  4 +++
 src/components/sidebar/sidebar-disabling.ts   |  7 ++---
 6 files changed, 50 insertions(+), 18 deletions(-)
 create mode 100644 src/components/sidebar/dimension-card/styles/card-disabled-notice.module.css

diff --git a/i18n/en.pot b/i18n/en.pot
index 71a3bd19..640fefee 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-06-02T08:10:01.263Z\n"
-"PO-Revision-Date: 2026-06-02T08:10:01.263Z\n"
+"POT-Creation-Date: 2026-06-02T11:49:39.614Z\n"
+"PO-Revision-Date: 2026-06-02T11:49:39.614Z\n"
 
 msgid "Add to {{- axisName}}"
 msgstr "Add to {{- axisName}}"
@@ -632,12 +632,8 @@ msgstr ""
 "used in the layout ({{- tetName}}). Remove the existing dimensions to use "
 "these."
 
-msgid ""
-"Program indicators are not valid with {{visType}}. Switch to Line list to "
-"use them."
-msgstr ""
-"Program indicators are not valid with {{visType}}. Switch to Line list to "
-"use them."
+msgid "Cannot be used with {{visType}}."
+msgstr "Cannot be used with {{visType}}."
 
 msgid ""
 "This dimension is used as the custom value. Remove the custom value to use "
diff --git a/src/components/sidebar/dimension-card/card-disabled-notice.tsx b/src/components/sidebar/dimension-card/card-disabled-notice.tsx
index 32d652da..3572e82d 100644
--- a/src/components/sidebar/dimension-card/card-disabled-notice.tsx
+++ b/src/components/sidebar/dimension-card/card-disabled-notice.tsx
@@ -1,5 +1,6 @@
-import { NoticeBox } from '@dhis2/ui'
+import { IconInfo16 } from '@dhis2/ui'
 import type { FC } from 'react'
+import classes from './styles/card-disabled-notice.module.css'
 
 type CardDisabledNoticeProps = {
     message: string
@@ -8,9 +9,10 @@ type CardDisabledNoticeProps = {
 export const CardDisabledNotice: FC<CardDisabledNoticeProps> = ({
     message,
 }) => (
-    <div data-test="card-disabled-notice">
-        <NoticeBox warning dense>
-            {message}
-        </NoticeBox>
+    <div className={classes.notice} data-test="card-disabled-notice">
+        <span className={classes.icon}>
+            <IconInfo16 />
+        </span>
+        <span className={classes.message}>{message}</span>
     </div>
 )
diff --git a/src/components/sidebar/dimension-card/dimension-card.tsx b/src/components/sidebar/dimension-card/dimension-card.tsx
index 97c13918..42272ebb 100644
--- a/src/components/sidebar/dimension-card/dimension-card.tsx
+++ b/src/components/sidebar/dimension-card/dimension-card.tsx
@@ -68,10 +68,10 @@ export const DimensionCard: FC<DimensionCardProps> = ({
 
     return (
         <>
-            {noticeText && <CardDisabledNotice message={noticeText} />}
             <div
                 className={cx(classes.container, {
                     [classes.isDisabled]: isVisuallyDisabled,
+                    [classes.hasNotice]: !!noticeText,
                 })}
                 data-test="dimension-card"
             >
@@ -98,6 +98,7 @@ export const DimensionCard: FC<DimensionCardProps> = ({
                     </ContainingCardDisabledContext.Provider>
                 </div>
             </div>
+            {noticeText && <CardDisabledNotice message={noticeText} />}
         </>
     )
 }
diff --git a/src/components/sidebar/dimension-card/styles/card-disabled-notice.module.css b/src/components/sidebar/dimension-card/styles/card-disabled-notice.module.css
new file mode 100644
index 00000000..72371e77
--- /dev/null
+++ b/src/components/sidebar/dimension-card/styles/card-disabled-notice.module.css
@@ -0,0 +1,30 @@
+.notice {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+    /* Cancels the card list's row gap so the notice sits flush against the
+     * bottom of the card it belongs to. */
+    margin-block-start: -8px;
+    padding-block: 6px;
+    padding-inline: 8px;
+    background-color: transparent;
+    border: 1px solid var(--colors-grey300);
+    border-block-start: none;
+    border-end-start-radius: 5px;
+    border-end-end-radius: 5px;
+}
+
+.icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    margin-block-start: 0px;
+}
+.icon svg {
+    color: var(--colors-grey500);
+}
+
+.message {
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--colors-grey600);
+}
diff --git a/src/components/sidebar/dimension-card/styles/dimension-card.module.css b/src/components/sidebar/dimension-card/styles/dimension-card.module.css
index 950083ff..cc286fe5 100644
--- a/src/components/sidebar/dimension-card/styles/dimension-card.module.css
+++ b/src/components/sidebar/dimension-card/styles/dimension-card.module.css
@@ -5,6 +5,10 @@
     border: 1px solid var(--colors-grey400);
     border-radius: 5px;
 }
+.container.hasNotice {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+}
 .container.isDisabled {
     border-color: var(--colors-grey300);
     background-color: color-mix(
diff --git a/src/components/sidebar/sidebar-disabling.ts b/src/components/sidebar/sidebar-disabling.ts
index 0dc6900a..718709ae 100644
--- a/src/components/sidebar/sidebar-disabling.ts
+++ b/src/components/sidebar/sidebar-disabling.ts
@@ -44,10 +44,9 @@ const differentTetMessage = (tetName: string): string =>
 const programIndicatorsVisTypeMessage = (
     visualizationType: VisualizationType
 ): string =>
-    i18n.t(
-        'Program indicators are not valid with {{visType}}. Switch to Line list to use them.',
-        { visType: visTypeDisplayNames[visualizationType] }
-    )
+    i18n.t('Cannot be used with {{visType}}.', {
+        visType: visTypeDisplayNames[visualizationType],
+    })
 
 /* The three data-source branches below directly express which cards a
  * particular data source's invalid-layout states disable and which card

From f8e45e0d00c85e1d85013eb16de6a037545839f0 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 14:26:50 +0200
Subject: [PATCH 06/19] fix: empty chip unapplied styles

---
 .../dimension-drag-overlay.tsx                |  7 ++--
 .../layout-panel/axis/__tests__/chip.cy.tsx   | 38 +++++++++++++++++++
 .../layout-panel/axis/chip-base.tsx           |  7 +++-
 src/components/layout-panel/axis/chip.tsx     |  9 ++---
 .../axis/styles/chip-base.module.css          | 18 ++++++++-
 .../layout-panel/axis/styles/chip.module.css  | 20 ----------
 6 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/src/components/app-wrapper/drag-and-drop-provider/dimension-drag-overlay.tsx b/src/components/app-wrapper/drag-and-drop-provider/dimension-drag-overlay.tsx
index aa4e7dd7..34eacd3e 100644
--- a/src/components/app-wrapper/drag-and-drop-provider/dimension-drag-overlay.tsx
+++ b/src/components/app-wrapper/drag-and-drop-provider/dimension-drag-overlay.tsx
@@ -37,12 +37,13 @@ const DragOverlayItem: FC<
                     chipClasses.dragging,
                     classes.overlay,
                     {
-                        [chipClasses.chipEmpty]:
-                            !!data.overlayItemProps.itemsText,
+                        [chipClasses.chipEmpty]: data.overlayItemProps.isEmpty,
                     }
                 )}
             >
-                <ChipBase {...data.overlayItemProps} isDragging />
+                <div className={chipClasses.content}>
+                    <ChipBase {...data.overlayItemProps} isDragging />
+                </div>
             </div>
         )
     }
diff --git a/src/components/layout-panel/axis/__tests__/chip.cy.tsx b/src/components/layout-panel/axis/__tests__/chip.cy.tsx
index bb575b60..cf4e5c70 100644
--- a/src/components/layout-panel/axis/__tests__/chip.cy.tsx
+++ b/src/components/layout-panel/axis/__tests__/chip.cy.tsx
@@ -294,6 +294,44 @@ describe('<Chip />', () => {
         assertTooltipContent(['None selected'])
     })
 
+    it('renders an empty filter chip with a muted suffix', () => {
+        const dimension: LayoutDimension = {
+            id: 'ZzYYXq4fJie.X8zyunlgUfM',
+            name: 'MCH Infant Feeding',
+            dimensionType: 'DATA_ELEMENT',
+            valueType: 'TEXT',
+            optionSet: 'x31y45jvIQL',
+            dimensionId: 'X8zyunlgUfM',
+            programStageId: 'ZzYYXq4fJie',
+            suffix: 'Baby Postnatal',
+        }
+
+        const appWrapperProps = createMockOptions({
+            itemsByDimension: {},
+            conditionsByDimension: {},
+        })
+
+        cy.mount(
+            <MockAppWrapper {...appWrapperProps}>
+                <Chip dimension={dimension} axisId="filters" />
+            </MockAppWrapper>
+        )
+
+        cy.window().then((win) => {
+            const probe = win.document.createElement('span')
+            probe.style.color = 'var(--colors-grey600)'
+            win.document.body.appendChild(probe)
+            const expectedSuffixColor = win.getComputedStyle(probe).color
+            probe.remove()
+
+            cy.contains('· Baby Postnatal').should(
+                'have.css',
+                'color',
+                expectedSuffixColor
+            )
+        })
+    })
+
     it('renders a chip in filters that has items', () => {
         const activeStatus = 'ACTIVE'
         const completedStatus = 'COMPLETED'
diff --git a/src/components/layout-panel/axis/chip-base.tsx b/src/components/layout-panel/axis/chip-base.tsx
index d1cf163b..03859bf6 100644
--- a/src/components/layout-panel/axis/chip-base.tsx
+++ b/src/components/layout-panel/axis/chip-base.tsx
@@ -11,6 +11,7 @@ export interface ChipBaseProps {
     dimensionName: string
     itemsText: string
     suffix?: string
+    isEmpty?: boolean
     isDragging?: boolean
     onClick: () => void
 }
@@ -20,12 +21,16 @@ export const ChipBase: React.FC<ChipBaseProps> = ({
     dimensionName,
     itemsText,
     suffix,
+    isEmpty,
     isDragging,
     onClick,
 }) => (
     <button
         type="button"
-        className={cx(classes.chipBase, { [classes.dragging]: isDragging })}
+        className={cx(classes.chipBase, {
+            [classes.empty]: isEmpty,
+            [classes.dragging]: isDragging,
+        })}
         onClick={onClick}
     >
         {dimensionType && (
diff --git a/src/components/layout-panel/axis/chip.tsx b/src/components/layout-panel/axis/chip.tsx
index 6372bac2..249600c7 100644
--- a/src/components/layout-panel/axis/chip.tsx
+++ b/src/components/layout-panel/axis/chip.tsx
@@ -71,6 +71,7 @@ export const Chip: FC<ChipProps> = ({ dimension, axisId }) => {
         dimension,
         formatValueOptions: { digitGroupSeparator },
     })
+    const isEmpty = axisId === 'filters' && items.length === 0 && !hasConditions
     const chipItemsText = useMemo(
         () =>
             getChipItemsText({
@@ -87,9 +88,10 @@ export const Chip: FC<ChipProps> = ({ dimension, axisId }) => {
             dimensionName: dimension.name,
             suffix: dimension.suffix,
             itemsText: chipItemsText,
+            isEmpty,
             onClick: openDimensionModal,
         }),
-        [dimension, chipItemsText, openDimensionModal]
+        [dimension, chipItemsText, isEmpty, openDimensionModal]
     )
     const droppableData = useMemo<AxisSortableData>(
         () => ({
@@ -143,10 +145,7 @@ export const Chip: FC<ChipProps> = ({ dimension, axisId }) => {
         >
             <div
                 className={cx(classes.chip, {
-                    [classes.chipEmpty]:
-                        axisId === 'filters' &&
-                        items.length === 0 &&
-                        !hasConditions,
+                    [classes.chipEmpty]: isEmpty,
                     [classes.active]: isDragging,
                     [classes.showBlank]: !dimension.name,
                 })}
diff --git a/src/components/layout-panel/axis/styles/chip-base.module.css b/src/components/layout-panel/axis/styles/chip-base.module.css
index 08199ba5..b74c397a 100644
--- a/src/components/layout-panel/axis/styles/chip-base.module.css
+++ b/src/components/layout-panel/axis/styles/chip-base.module.css
@@ -16,6 +16,15 @@
     background: #cdeae8;
 }
 
+.chipBase.empty {
+    background-color: var(--colors-grey100);
+    color: var(--colors-grey900);
+}
+
+.chipBase.empty:hover {
+    background-color: var(--colors-grey200);
+}
+
 .label {
     white-space: nowrap;
     display: flex;
@@ -41,6 +50,10 @@
     white-space: nowrap;
 }
 
+.empty .secondary {
+    color: var(--colors-grey600);
+}
+
 .items {
     white-space: nowrap;
     flex-shrink: 0;
@@ -54,8 +67,9 @@
     padding: 2px 2px 1px 2px;
 }
 
-.dragging .items {
-    background-color: var(--colors-grey300);
+.empty .items {
+    background: #eff1f3;
+    color: var(--colors-grey900);
 }
 
 .items:empty {
diff --git a/src/components/layout-panel/axis/styles/chip.module.css b/src/components/layout-panel/axis/styles/chip.module.css
index 16e1d07d..b07dc8bf 100644
--- a/src/components/layout-panel/axis/styles/chip.module.css
+++ b/src/components/layout-panel/axis/styles/chip.module.css
@@ -38,26 +38,6 @@
     border-color: var(--colors-grey400);
 }
 
-.chipEmpty .chipBase {
-    color: var(--colors-grey900);
-}
-
-.chipEmpty .content button {
-    background-color: var(--colors-grey100);
-}
-
-.chipEmpty .content button:hover {
-    background-color: var(--colors-grey200);
-}
-
-.chipEmpty .secondary {
-    color: var(--colors-grey600);
-}
-
-.chipEmpty .suffix {
-    background: #eff1f3;
-    color: var(--colors-grey900);
-}
 .dragging {
     margin: 0;
     align-items: center;

From 1ac5f38def93bba104bcf84a1134348b550cf7cd Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 14:27:27 +0200
Subject: [PATCH 07/19] fix: drag cursor

---
 src/components/layout-panel/axis/styles/chip.module.css    | 7 +++++++
 .../styles/dimension-item-container.module.css             | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/src/components/layout-panel/axis/styles/chip.module.css b/src/components/layout-panel/axis/styles/chip.module.css
index b07dc8bf..662fc468 100644
--- a/src/components/layout-panel/axis/styles/chip.module.css
+++ b/src/components/layout-panel/axis/styles/chip.module.css
@@ -44,6 +44,13 @@
     min-block-size: 20px;
     opacity: 0.9;
 }
+
+/* The drag overlay tracks the cursor, so it's the element under the pointer
+ * for the whole drag. Override the inner cursor so it reads grabbing. */
+.chip.dragging,
+.chip.dragging * {
+    cursor: grabbing;
+}
 .showBlank .content {
     visibility: hidden;
     min-inline-size: 100px;
diff --git a/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css b/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css
index 9d35e0eb..00d313a7 100644
--- a/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css
+++ b/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css
@@ -63,6 +63,13 @@
     padding-inline-end: 4px;
 }
 
+/* The drag overlay tracks the cursor, so it's the element under the pointer
+ * for the whole drag. Override the inner item's cursor so it reads grabbing. */
+.container.dragOverlay,
+.container.dragOverlay * {
+    cursor: grabbing;
+}
+
 .container.disabled {
     cursor: not-allowed;
     opacity: 0.5;

From e5f4fecb058b9d23e4272d8ee5b47dd3f15c322e Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 15:57:37 +0200
Subject: [PATCH 08/19] fix: dragged item static style

---
 .../dimension-item/styles/dimension-item-container.module.css  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css b/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css
index 00d313a7..619b3311 100644
--- a/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css
+++ b/src/components/sidebar/dimension-item/styles/dimension-item-container.module.css
@@ -37,9 +37,10 @@
     background-color: #bbe2e0;
 }
 
-.container.dragging {
+.container.dragging:active {
     background-color: var(--colors-grey100);
     border-color: var(--colors-grey400);
+    opacity: 0.9;
 }
 
 .container.multiSelected,

From 1092d087a17d4eceb1327719bed933e2391208fd Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 16:01:57 +0200
Subject: [PATCH 09/19] fix: prevent sidebar scrolling when dragging

---
 .../dnd-context-provider.tsx                      | 15 ++++++++++++++-
 src/components/sidebar/sidebar.tsx                |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/app-wrapper/drag-and-drop-provider/dnd-context-provider.tsx b/src/components/app-wrapper/drag-and-drop-provider/dnd-context-provider.tsx
index b3077633..014dd3df 100644
--- a/src/components/app-wrapper/drag-and-drop-provider/dnd-context-provider.tsx
+++ b/src/components/app-wrapper/drag-and-drop-provider/dnd-context-provider.tsx
@@ -1,4 +1,10 @@
-import { DndContext, useSensor, useSensors, PointerSensor } from '@dnd-kit/core'
+import {
+    DndContext,
+    useSensor,
+    useSensors,
+    PointerSensor,
+    type AutoScrollOptions,
+} from '@dnd-kit/core'
 import { type FC, type PropsWithChildren } from 'react'
 import { collisionDetector } from './collision-detector'
 import { DimensionDragOverlay } from './dimension-drag-overlay'
@@ -10,6 +16,12 @@ const activateAt15pixels = {
     },
 }
 
+const DISABLE_AUTO_SCROLL_SELECTOR = '[data-dnd-auto-scroll="disabled"]'
+
+const autoScrollOptions: AutoScrollOptions = {
+    canScroll: (element) => !element.matches(DISABLE_AUTO_SCROLL_SELECTOR),
+}
+
 export const DndContextProvider: FC<PropsWithChildren> = ({ children }) => {
     // Wait 15px movement before starting drag, so that click event isn't overridden
     const sensor = useSensor(PointerSensor, activateAt15pixels)
@@ -18,6 +30,7 @@ export const DndContextProvider: FC<PropsWithChildren> = ({ children }) => {
 
     return (
         <DndContext
+            autoScroll={autoScrollOptions}
             collisionDetection={collisionDetector}
             sensors={sensors}
             onDragEnd={onDragEnd}
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 4bfce8d0..fbecd2da 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -58,6 +58,7 @@ export const Sidebar: FC = () => {
                     <div
                         onScroll={handleScroll}
                         className={classes.dimensionCardsContainer}
+                        data-dnd-auto-scroll="disabled"
                     >
                         {isDataSourceProgramWithRegistration(
                             dataSourceMetadataItem

From d908d1e55d72c95c27d40ff5ef76fe5b40df1140 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 20:07:14 +0200
Subject: [PATCH 10/19] fix: remove data source combobox icon, adjust label
 padding

---
 .../sidebar/data-source-select/data-source-select-combobox.tsx  | 2 --
 .../styles/data-source-select-combobox.module.css               | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/sidebar/data-source-select/data-source-select-combobox.tsx b/src/components/sidebar/data-source-select/data-source-select-combobox.tsx
index 47117430..4fc06be1 100644
--- a/src/components/sidebar/data-source-select/data-source-select-combobox.tsx
+++ b/src/components/sidebar/data-source-select/data-source-select-combobox.tsx
@@ -2,7 +2,6 @@ import i18n from '@dhis2/d2-i18n'
 import {
     IconChevronDown16,
     IconChevronUp16,
-    IconDimensionEventDataItem16,
     IconErrorFilled24,
     theme,
 } from '@dhis2/ui'
@@ -57,7 +56,6 @@ export const DataSourceSelectCombobox: FC<DataSourceSelectComboboxProps> = ({
                         [classes.empty]: !dataSourceMetadata,
                     })}
                 >
-                    {!!dataSourceMetadata && <IconDimensionEventDataItem16 />}
                     <span className={classes.ellipsis}>
                         {dataSourceMetadata?.name ??
                             i18n.t('Choose a data source')}
diff --git a/src/components/sidebar/data-source-select/styles/data-source-select-combobox.module.css b/src/components/sidebar/data-source-select/styles/data-source-select-combobox.module.css
index 43d67b4a..fa94f7b7 100644
--- a/src/components/sidebar/data-source-select/styles/data-source-select-combobox.module.css
+++ b/src/components/sidebar/data-source-select/styles/data-source-select-combobox.module.css
@@ -13,7 +13,7 @@
     align-items: center;
     border: 1px solid transparent;
     border-radius: 3px;
-    padding-block: 2px;
+    padding-block: 3px 1px;
     padding-inline: 8px 4px;
     min-block-size: 28px;
     justify-content: space-between;

From aa8d345b97c44147d506175b5495f663388e02ba Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 20:24:35 +0200
Subject: [PATCH 11/19] fix: custom value list sorting

---
 .../use-custom-value-data-elements.spec.ts    | 36 +++++++++++++++++
 .../use-custom-value-data-elements.ts         | 39 +++++++++++--------
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts b/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts
index 89ebba75..cd1cfd36 100644
--- a/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts
+++ b/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts
@@ -146,6 +146,42 @@ describe('useCustomValueDataElements', () => {
         expect(result.current.filteredByStageName).toBeUndefined()
     })
 
+    it('sorts data elements alphabetically by name regardless of API order', async () => {
+        const outOfOrderResponse = {
+            dimensions: [
+                {
+                    id: 's2.de2',
+                    name: 'DE 2',
+                    aggregationType: 'AVERAGE',
+                    dimensionType: 'DATA_ELEMENT',
+                },
+                {
+                    id: 's1.de1',
+                    name: 'DE 1',
+                    aggregationType: 'SUM',
+                    dimensionType: 'DATA_ELEMENT',
+                },
+            ],
+        }
+        const { result } = await renderHookWithAppWrapper(
+            () => useCustomValueDataElements(),
+            {
+                ...buildMockOptions({ columns: ['p1.enrollmentDate'] }),
+                queryData: {
+                    [ANALYTICS_RESOURCE]: outOfOrderResponse,
+                },
+            }
+        )
+
+        await waitFor(() => {
+            expect(result.current.dataElements).toBeDefined()
+        })
+
+        expect(
+            result.current.dataElements?.map((dataElement) => dataElement.name)
+        ).toEqual(['DE 1', 'DE 2'])
+    })
+
     it('omits stageName when the layout has no program stage and the program has only one stage', async () => {
         const singleStage = {
             id: 'sX',
diff --git a/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts b/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts
index 9f9bf7c8..307e02bd 100644
--- a/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts
+++ b/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts
@@ -100,25 +100,32 @@ export const useCustomValueDataElements = () => {
             return undefined
         }
 
+        const byName = (a: { name: string }, b: { name: string }) =>
+            a.name.localeCompare(b.name)
+
         if (layoutStageId) {
-            return data.dimensions.filter(
-                (dim) => getStageIdFromDimensionId(dim.id) === layoutStageId
-            )
+            return data.dimensions
+                .filter(
+                    (dim) => getStageIdFromDimensionId(dim.id) === layoutStageId
+                )
+                .sort(byName)
         }
 
-        return data.dimensions.map((dim) => {
-            const stageId = getStageIdFromDimensionId(dim.id)
-            if (!stageId || !programHasMultipleStages) {
-                return dim
-            }
-            const stage = metadataStore.getProgramStageMetadataItem(stageId)
-            if (!stage) {
-                throw new Error(
-                    `Could not find stage with ID "${stageId}" in the metadata store`
-                )
-            }
-            return { ...dim, stageName: stage.name }
-        })
+        return data.dimensions
+            .map((dim) => {
+                const stageId = getStageIdFromDimensionId(dim.id)
+                if (!stageId || !programHasMultipleStages) {
+                    return dim
+                }
+                const stage = metadataStore.getProgramStageMetadataItem(stageId)
+                if (!stage) {
+                    throw new Error(
+                        `Could not find stage with ID "${stageId}" in the metadata store`
+                    )
+                }
+                return { ...dim, stageName: stage.name }
+            })
+            .sort(byName)
     }, [data, layoutStageId, metadataStore, programHasMultipleStages])
 
     return {

From 9138065555c5c7a96600b141d4e8514cd60e498f Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 20:27:39 +0200
Subject: [PATCH 12/19] fix: viz type selector padding

---
 .../styles/visualization-type-selector.module.css               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout-panel/top-bar/visualization-type-selector/styles/visualization-type-selector.module.css b/src/components/layout-panel/top-bar/visualization-type-selector/styles/visualization-type-selector.module.css
index dec0a980..4053ef8b 100644
--- a/src/components/layout-panel/top-bar/visualization-type-selector/styles/visualization-type-selector.module.css
+++ b/src/components/layout-panel/top-bar/visualization-type-selector/styles/visualization-type-selector.module.css
@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     gap: var(--spacers-dp4);
-    padding: 6px 8px;
+    padding: 6px 4px 6px 8px;
     block-size: 100%;
     border: none;
     border-radius: 5px;

From be1fa0e3799b4ef4047fbf6fe10f602b90b6489e Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 20:36:55 +0200
Subject: [PATCH 13/19] fix: title bar text cutoff

---
 src/components/toolbar/title-bar/styles/title-bar.module.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/toolbar/title-bar/styles/title-bar.module.css b/src/components/toolbar/title-bar/styles/title-bar.module.css
index 066d090a..914cde13 100644
--- a/src/components/toolbar/title-bar/styles/title-bar.module.css
+++ b/src/components/toolbar/title-bar/styles/title-bar.module.css
@@ -14,7 +14,7 @@
 .cell {
     display: flex;
     min-inline-size: 0;
-    align-items: center;
+    align-items: baseline;
     background-color: var(--colors-white);
     padding: 6px;
     border-radius: 5px;
@@ -22,10 +22,11 @@
 
 .title {
     font-size: 13px;
-    line-height: 1;
+    line-height: 1.2;
     font-weight: 500;
     color: var(--colors-grey800);
     min-inline-size: 0;
+    margin-block-start: 2px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;

From dd178517c72a2f43585055222aa89153e14020e8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 20:48:09 +0200
Subject: [PATCH 14/19] fix: custom value stage label style

---
 .../custom-value-modal/custom-value-option.tsx |  2 +-
 .../styles/custom-value-option.module.css      | 18 ++++++------------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/layout-panel/custom-value-modal/custom-value-option.tsx b/src/components/layout-panel/custom-value-modal/custom-value-option.tsx
index f9f71f99..2622a6a9 100644
--- a/src/components/layout-panel/custom-value-modal/custom-value-option.tsx
+++ b/src/components/layout-panel/custom-value-modal/custom-value-option.tsx
@@ -36,6 +36,6 @@ export const CustomValueOption: FC<CustomValueOptionProps> = ({
             )}
         </svg>
         <span className={classes.label}>{label}</span>
-        {stageName && <span className={classes.stageChip}>{stageName}</span>}
+        {stageName && <span className={classes.stageLabel}>{stageName}</span>}
     </button>
 )
diff --git a/src/components/layout-panel/custom-value-modal/styles/custom-value-option.module.css b/src/components/layout-panel/custom-value-modal/styles/custom-value-option.module.css
index a93229c5..cc9680f9 100644
--- a/src/components/layout-panel/custom-value-modal/styles/custom-value-option.module.css
+++ b/src/components/layout-panel/custom-value-modal/styles/custom-value-option.module.css
@@ -18,6 +18,10 @@
     background-color: var(--colors-grey200);
 }
 
+.option:active {
+    background-color: var(--colors-grey300);
+}
+
 .option.active {
     background-color: var(--colors-teal050);
     cursor: auto;
@@ -38,20 +42,10 @@
     text-overflow: ellipsis;
 }
 
-.stageChip {
+.stageLabel {
     flex-shrink: 0;
     margin-inline-start: var(--spacers-dp8);
-    padding: 5px 6px;
-    background-color: var(--colors-grey300);
-    border-radius: 3px;
-    color: var(--colors-grey900);
+    color: var(--colors-grey700);
     font-size: 13px;
     white-space: nowrap;
 }
-.option.active .stageChip {
-    background-color: var(--colors-teal200);
-}
-
-.option:hover:not(.active) .stageChip {
-    background-color: var(--colors-grey400);
-}

From 47ba0ae4a476efdda3a87df0aa915a49f057f740 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 2 Jun 2026 21:00:48 +0200
Subject: [PATCH 15/19] chore: test fix

---
 src/components/sidebar/__tests__/sidebar-disabling.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/__tests__/sidebar-disabling.spec.tsx b/src/components/sidebar/__tests__/sidebar-disabling.spec.tsx
index 68218ea8..cac45958 100644
--- a/src/components/sidebar/__tests__/sidebar-disabling.spec.tsx
+++ b/src/components/sidebar/__tests__/sidebar-disabling.spec.tsx
@@ -293,7 +293,7 @@ describe('useCardDisabledNoticeText', () => {
             })
         )
         expect(result.current.enrollment).toBeUndefined()
-        expect(result.current.pi).toMatch(/Program indicators/)
+        expect(result.current.pi).toMatch(/Cannot be used with Pivot table/)
     })
 
     it('returns undefined for non-sidebar card ids (metadata, other)', async () => {
@@ -405,7 +405,7 @@ describe('useCardDisabledNoticeText', () => {
                 },
             })
         )
-        expect(result.current).toMatch(/Program indicators/)
+        expect(result.current).toMatch(/Cannot be used with Pivot table/)
     })
 })
 

From 514a1dcb127a46168054a191e184250838600566 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Wed, 3 Jun 2026 08:48:03 +0200
Subject: [PATCH 16/19] chore: test fix

---
 .../use-custom-value-data-elements.spec.ts    | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts b/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts
index cd1cfd36..7a1cd658 100644
--- a/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts
+++ b/src/components/layout-panel/custom-value-modal/__tests__/use-custom-value-data-elements.spec.ts
@@ -4,7 +4,11 @@ import {
     type VisUiConfigState,
     type CustomValueObject,
 } from '@store/vis-ui-config-slice'
-import { renderHookWithAppWrapper } from '@test-utils/app-wrapper'
+import {
+    renderHookWithAppWrapper,
+    type MockOptions,
+} from '@test-utils/app-wrapper'
+import { createDeferredQuery } from '@test-utils/deferred-query'
 import { waitFor } from '@testing-library/react'
 import type { RootState } from '@types'
 import deepmerge from 'deepmerge'
@@ -334,12 +338,29 @@ describe('useCustomValueDataElements', () => {
     })
 
     it('returns undefined dataElements while loading', async () => {
+        /* Hold the dimensions request in flight so the loading assertion is
+         * deterministic. Without this, the query can resolve during the
+         * wrapper's internal store wait, flipping isLoading to false before
+         * the assertion under full-suite load. */
+        const deferredDimensions = createDeferredQuery()
         const { result } = await renderHookWithAppWrapper(
             () => useCustomValueDataElements(),
-            buildMockOptions({ columns: ['p1.enrollmentDate'] })
+            {
+                ...buildMockOptions({ columns: ['p1.enrollmentDate'] }),
+                queryData: {
+                    [ANALYTICS_RESOURCE]: deferredDimensions.defer(
+                        () => analyticsResponse
+                    ),
+                } as MockOptions['queryData'],
+            }
         )
 
         expect(result.current.isLoading).toBe(true)
         expect(result.current.dataElements).toBeUndefined()
+
+        await deferredDimensions.releaseAll()
+        await waitFor(() => {
+            expect(result.current.dataElements).toBeDefined()
+        })
     })
 })

From 3d355a02fa19c44902034d908f3e8cff59197f82 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Wed, 3 Jun 2026 08:57:53 +0200
Subject: [PATCH 17/19] chore: test fix

---
 i18n/en.pot                                            | 4 ++--
 src/components/layout-panel/axis/__tests__/chip.cy.tsx | 8 +++-----
 src/components/layout-panel/axis/chip-base.tsx         | 5 ++++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 640fefee..e53e7d48 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-06-02T11:49:39.614Z\n"
-"PO-Revision-Date: 2026-06-02T11:49:39.614Z\n"
+"POT-Creation-Date: 2026-06-03T06:57:55.329Z\n"
+"PO-Revision-Date: 2026-06-03T06:57:55.331Z\n"
 
 msgid "Add to {{- axisName}}"
 msgstr "Add to {{- axisName}}"
diff --git a/src/components/layout-panel/axis/__tests__/chip.cy.tsx b/src/components/layout-panel/axis/__tests__/chip.cy.tsx
index cf4e5c70..33137267 100644
--- a/src/components/layout-panel/axis/__tests__/chip.cy.tsx
+++ b/src/components/layout-panel/axis/__tests__/chip.cy.tsx
@@ -324,11 +324,9 @@ describe('<Chip />', () => {
             const expectedSuffixColor = win.getComputedStyle(probe).color
             probe.remove()
 
-            cy.contains('· Baby Postnatal').should(
-                'have.css',
-                'color',
-                expectedSuffixColor
-            )
+            cy.getByDataTest('chip-suffix')
+                .should('contain.text', '· Baby Postnatal')
+                .and('have.css', 'color', expectedSuffixColor)
         })
     })
 
diff --git a/src/components/layout-panel/axis/chip-base.tsx b/src/components/layout-panel/axis/chip-base.tsx
index 03859bf6..ead2aeee 100644
--- a/src/components/layout-panel/axis/chip-base.tsx
+++ b/src/components/layout-panel/axis/chip-base.tsx
@@ -41,7 +41,10 @@ export const ChipBase: React.FC<ChipBaseProps> = ({
         <span className={classes.label}>
             <span className={classes.primary}>{dimensionName}</span>
             {suffix && (
-                <span className={classes.secondary}>{`· ${suffix}`}</span>
+                <span
+                    className={classes.secondary}
+                    data-test="chip-suffix"
+                >{`· ${suffix}`}</span>
             )}
         </span>
         <span className={classes.items} data-test="chip-items">

From 8c44a3608b51ed7f2c56c6cc94983c6cbbb4ccd5 Mon Sep 17 00:00:00 2001
From: Hendrik de Graaf <hendrik@dhis2.org>
Date: Mon, 8 Jun 2026 14:19:47 +0200
Subject: [PATCH 18/19] chore: move comparator outside of hook scope and reuse
 existing types

---
 .../use-custom-value-data-elements.ts                  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts b/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts
index 307e02bd..9ea6da72 100644
--- a/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts
+++ b/src/components/layout-panel/custom-value-modal/use-custom-value-data-elements.ts
@@ -32,6 +32,9 @@ const getStageIdFromDimensionId = (id: string | undefined): string | null => {
     return idParts.length === 2 ? idParts[0] : null
 }
 
+const compareByName = (a: DataElementDimension, b: DataElementDimension) =>
+    a.name.localeCompare(b.name)
+
 export const useCustomValueDataElements = () => {
     const {
         settings: { displayNameProperty },
@@ -100,15 +103,12 @@ export const useCustomValueDataElements = () => {
             return undefined
         }
 
-        const byName = (a: { name: string }, b: { name: string }) =>
-            a.name.localeCompare(b.name)
-
         if (layoutStageId) {
             return data.dimensions
                 .filter(
                     (dim) => getStageIdFromDimensionId(dim.id) === layoutStageId
                 )
-                .sort(byName)
+                .sort(compareByName)
         }
 
         return data.dimensions
@@ -125,7 +125,7 @@ export const useCustomValueDataElements = () => {
                 }
                 return { ...dim, stageName: stage.name }
             })
-            .sort(byName)
+            .sort(compareByName)
     }, [data, layoutStageId, metadataStore, programHasMultipleStages])
 
     return {

From 54e8e264dace0ddaa872443127607997bf7802b8 Mon Sep 17 00:00:00 2001
From: Hendrik de Graaf <hendrik@dhis2.org>
Date: Mon, 8 Jun 2026 14:29:35 +0200
Subject: [PATCH 19/19] chore: fix invalid Claude allow rules

---
 .claude/settings.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.claude/settings.json b/.claude/settings.json
index b0b834f9..4f66b6fc 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -2,8 +2,8 @@
     "permissions": {
         "allow": [
             "mcp__grep__*",
-            "mcp__plugin_context7_*",
-            "mcp__plugin_chrome-devtools-mcp_*"
+            "mcp__plugin_context7_context7__*",
+            "mcp__plugin_chrome-devtools-mcp_chrome-devtools__*"
         ]
     },
     "hooks": {