Merged PR 2498: 11237 wraping long names on incident detail screen

wraping long names on incident detail screen
dqops · Mar 7, 2024 · 11dd9ec · 11dd9ec
2 parents bd4cfbc + ea40957
commit 11dd9ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/dqops/src/main/frontend/src/pages/IncidentDetail/HistogramChart.tsx b/dqops/src/main/frontend/src/pages/IncidentDetail/HistogramChart.tsx
@@ -85,7 +85,7 @@ export const HistogramChart = ({
       <SectionWrapper title="Filter by columns">
         {Object.keys(histograms?.columns || {}).map((column, index) => (
           <div
-            className={clsx('flex gap-2 mb-2 cursor-pointer', {
+            className={clsx('flex gap-2 mb-2 cursor-pointer whitespace-normal break-all', {
               'font-bold text-gray-700': histogramFilter?.column === column,
               'text-gray-500':
                 histogramFilter?.column && histogramFilter?.column !== column
@@ -108,7 +108,7 @@ export const HistogramChart = ({
       <SectionWrapper title="Filter by check name">
         {Object.keys(histograms?.checks || {}).map((check, index) => (
           <div
-            className={clsx('flex gap-2 mb-2 cursor-pointer', {
+            className={clsx('flex gap-2 mb-2 cursor-pointer whitespace-normal break-all', {
               'font-bold text-gray-700': histogramFilter?.check === check,
               'text-gray-500':
                 histogramFilter?.check && histogramFilter?.check !== check

diff --git a/dqops/src/main/frontend/src/pages/IncidentDetail/index.tsx b/dqops/src/main/frontend/src/pages/IncidentDetail/index.tsx
@@ -351,17 +351,17 @@ export const IncidentDetail = () => {
           <SectionWrapper title="Table">
             <div className="flex gap-3 mb-3 items-center">
               <div className="flex-1">Connection</div>
-              <div className="flex-[2] font-bold">
+              <div className="flex-[2] font-bold whitespace-normal break-all">
                 {incidentDetail?.connection}
               </div>
             </div>
             <div className="flex gap-3 mb-3 items-center">
               <div className="flex-1">Schema</div>
-              <div className="flex-[2] font-bold">{incidentDetail?.schema}</div>
+              <div className="flex-[2] font-bold whitespace-normal break-all">{incidentDetail?.schema}</div>
             </div>
             <div className="flex gap-3 mb-3 items-center">
               <div className="flex-1">Table</div>
-              <div className="flex-[2] font-bold">{incidentDetail?.table}</div>
+              <div className="flex-[2] font-bold whitespace-normal break-all">{incidentDetail?.table}</div>
             </div>
             <div className="flex gap-3 mb-3 items-center">
               <div className="flex-1">Table priority</div>