R: Use canonical classnames

rsconcept/frontend/src/app/global-tooltips.tsx

@@ -10,7 +10,7 @@ export const GlobalTooltips = () => {
         layer='z-topmost'
         place='bottom-start'
         offset={24}
-        className='max-w-80 break-words rounded-lg! select-none'
+        className='max-w-80 wrap-break-word rounded-lg! select-none'
       />
       <Tooltip
         float

rsconcept/frontend/src/components/info-error.tsx

@@ -34,7 +34,7 @@ export function DescribeError({ error }: { error: ErrorData }) {
         <p>
           <b>Message:</b> {error.message}
         </p>
-        {error.stack && <pre className='whitespace-pre-wrap p-2 overflow-x-auto break-words'>{error.stack}</pre>}
+        {error.stack && <pre className='whitespace-pre-wrap p-2 overflow-x-auto wrap-break-word'>{error.stack}</pre>}
       </div>
     );
   }

rsconcept/frontend/src/features/rsform/components/info-constituenta.tsx

@@ -11,7 +11,7 @@ interface InfoConstituentaProps extends React.ComponentProps<'div'> {
 
 export function InfoConstituenta({ data, className, ...restProps }: InfoConstituentaProps) {
   return (
-    <div className={cn('dense min-w-60 break-words', className)} {...restProps}>
+    <div className={cn('dense min-w-60 wrap-break-word', className)} {...restProps}>
       <h2 className='cursor-default' title={data.is_inherited ? ' наследник' : undefined}>
         {data.alias}
         {data.is_inherited ? <IconChild size='1rem' className='inline-icon align-middle ml-1 mt-1' /> : null}

rsconcept/frontend/src/features/rsform/components/term-graph/schemas-guide.tsx

@@ -44,7 +44,7 @@ export function SchemasGuide({ schema }: SchemasGuideProps) {
       <Tooltip
         anchorSelect={`#${globalIDs.graph_schemas}`}
         place='right'
-        className='z-topmost grid max-w-100 break-words text-base'
+        className='z-topmost grid max-w-100 wrap-break-word text-base'
       >
         <div className='inline-flex items-center gap-2'>
           <span className='w-3 h-3 border rounded-full' style={{ backgroundColor: colorBgSchemas(0) }} />

rsconcept/frontend/src/features/rsform/components/view-constituents/table-side-constituents.tsx

@@ -73,7 +73,7 @@ export function TableSideConstituents({
       cell: props => (
         <TextContent
           noTooltip
-          className={props.getValue().includes('×') ? 'break-all' : 'break-words'}
+          className={props.getValue().includes('×') ? 'break-all' : 'wrap-break-word'}
           text={props.getValue()}
           maxLength={DESCRIPTION_MAX_SYMBOLS}
         />

rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/tab-arguments.tsx

@@ -78,7 +78,7 @@ export function TabArguments({ schema }: TabArgumentsProps) {
     argumentsHelper.accessor(arg => arg.typification, {
       id: 'type',
       enableHiding: true,
-      cell: props => <div className='w-36 text-sm break-words'>{props.getValue()}</div>
+      cell: props => <div className='w-36 text-sm wrap-break-word'>{props.getValue()}</div>
     }),
     argumentsHelper.display({
       id: 'actions',

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rslist/table-rslist.tsx

@@ -75,7 +75,7 @@ export function TableRSList({
       minSize: 150,
       maxSize: 200,
       cell: props => (
-        <div className='w-40 text-xs break-words'>{truncateToSymbol(props.getValue(), TYPIFICATION_TRUNCATE)}</div>
+        <div className='w-40 text-xs wrap-break-word'>{truncateToSymbol(props.getValue(), TYPIFICATION_TRUNCATE)}</div>
       )
     }),
     columnHelper.accessor(cst => cst.term_resolved || cst.term_raw || '', {