From cfafefe58c8eac2682e08bc9dd2eefe7d368af2b Mon Sep 17 00:00:00 2001
From: Harshil Sharma <18575143+harshilsharma63@users.noreply.github.com>
Date: Mon, 25 May 2026 09:36:01 +0530
Subject: [PATCH] Used short mode of data spillage report card in threads view
 to fix spacing issue (#36709)

---
 .../data_spillage_report.test.tsx             | 27 +++++++++++++++++++
 .../data_spillage_report.tsx                  |  6 ++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.test.tsx b/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.test.tsx
index 6d586f12dfd..04378eda513 100644
--- a/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.test.tsx
+++ b/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.test.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {act} from '@testing-library/react';
+import {createMemoryHistory} from 'history';
 import React from 'react';
 
 import type {Post} from '@mattermost/types/posts';
@@ -431,6 +432,32 @@ describe('components/post_view/data_spillage_report/DataSpillageReport', () => {
         expect(screen.queryByTestId('data-spillage-action-keep-message')).toBeVisible();
     });
 
+    it('should render in short mode in the global threads view even when isRHS is true', async () => {
+        const history = createMemoryHistory({initialEntries: ['/myteam/threads/abcdefghijklmnopqrstuvwxyz']});
+
+        renderWithContext(
+            <DataSpillageReport
+                post={post}
+                isRHS={true}
+            />,
+            baseState,
+            {history},
+        );
+
+        await act(async () => {});
+
+        const card = screen.getByTestId('data-spillage-report');
+        expect(card).toHaveClass('mode_short');
+        expect(card).not.toHaveClass('mode_full');
+
+        // short mode renders only the short field set
+        expect(screen.queryAllByTestId('property-card-row')).toHaveLength(4);
+
+        // action rows are gated on mode === 'full', so they must not render here
+        expect(screen.queryByTestId('data-spillage-action')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('data-spillage-action-download-report')).not.toBeInTheDocument();
+    });
+
     describe.each([
         ['Pending', true],
         ['Retained', false],
diff --git a/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.tsx b/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.tsx
index bab114dfb7e..4c6f3155e68 100644
--- a/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.tsx
+++ b/webapp/channels/src/components/post_view/data_spillage_report/data_spillage_report.tsx
@@ -3,6 +3,7 @@
 
 import React, {useMemo} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import {matchPath, useLocation} from 'react-router-dom';
 
 import {ContentFlaggingStatus} from '@mattermost/types/content_flagging';
 import type {Post} from '@mattermost/types/posts';
@@ -60,6 +61,9 @@ type Props = {
 
 export function DataSpillageReport({post, isRHS}: Props) {
     const {formatMessage} = useIntl();
+    const {pathname} = useLocation();
+
+    const inGlobalThreadsView = matchPath(pathname, {path: '/:team/threads/:threadIdentifier?'}) != null;
 
     const reportedPostId = post.props.reported_post_id as string;
 
@@ -108,7 +112,7 @@ export function DataSpillageReport({post, isRHS}: Props) {
         user: (<AtMention mentionName={reportingUser?.username || ''}/>),
     });
 
-    const mode = isRHS ? 'full' : 'short';
+    const mode = (isRHS && !inGlobalThreadsView) ? 'full' : 'short';
 
     const metadata = useMemo<PropertiesCardViewMetadata>(() => {
         const fieldMetadata: PropertiesCardViewMetadata = {