diff --git a/apps/web/src/routes/_app/datahub/index.tsx b/apps/web/src/routes/_app/datahub/index.tsx
index 18b8ee392..c1ff0f100 100644
--- a/apps/web/src/routes/_app/datahub/index.tsx
+++ b/apps/web/src/routes/_app/datahub/index.tsx
@@ -307,7 +307,14 @@ const MasterDataTable: React.FC<{
       <DataTable
         columns={[
           {
-            accessorFn: (subject) => removeSubjectIdScope(subject.id).slice(0, subjectIdDisplaySetting ?? 9),
+            accessorFn: (subject) => removeSubjectIdScope(subject.id),
+            cell: (ctx) => (
+              <div className="grid">
+                <div className="min-w-0 overflow-x-auto whitespace-nowrap" title={ctx.getValue() as string}>
+                  {(ctx.getValue() as string).slice(0, subjectIdDisplaySetting ?? 9)}
+                </div>
+              </div>
+            ),
             header: t('datahub.index.table.subject'),
             id: 'subjectId'
           },