fix(ui): improve chart text spacing and prevent unnecessary truncation (#16894)

web/app/components/app-sidebar/basic.tsx

@@ -54,7 +54,7 @@ const ICON_MAP = {
   notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
 }
 
-export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
+export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, isExtraInLine, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
   const { t } = useTranslation()
 
   return (
@@ -70,9 +70,9 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
         </div>
 
       }
-      {mode === 'expand' && <div className="group">
+      {mode === 'expand' && <div className="group w-full">
         <div className={`system-md-semibold flex flex-row items-center text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
-          <div className="max-w-[180px] truncate">
+          <div className="min-w-0 overflow-hidden text-ellipsis break-normal">
             {name}
           </div>
           {hoverTip
@@ -88,7 +88,11 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
             />
           }
         </div>
-        <div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : ''}</div>
+        {isExtraInLine ? (
+          <div className="system-2xs-medium-uppercase flex text-text-tertiary">{type}</div>
+        ) : (
+          <div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : type}</div>
+        )}
       </div>}
     </div>
   )

web/app/components/app/overview/appChart.tsx

@@ -237,7 +237,7 @@ const Chart: React.FC<IChartProps> = ({
       <div className='mb-4 flex-1'>
         <Basic
           isExtraInLine={CHART_TYPE_CONFIG[chartType].showTokens}
-          name={chartType !== 'costs' ? (sumData.toLocaleString() + unit) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
+          name={chartType !== 'costs' ? (`${sumData.toLocaleString()} ${unit}`) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
           type={!CHART_TYPE_CONFIG[chartType].showTokens
             ? ''
             : <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
@@ -350,6 +350,7 @@ export const TokenPerSecond: FC<IBizChartProps> = ({ id, period }) => {
     isAvg
     unit={t('appOverview.analysis.tokenPS') as string}
     {...(noDataFlag && { yMax: 100 })}
+    className="min-w-0"
   />
 }