Binary files a/public/voice-clone/add-voice.png and b/public/voice-clone/add-voice.png differ
Binary files a/public/voice-clone/my-generations.png and b/public/voice-clone/my-generations.png differ
Binary files a/public/voice-clone/step-1.png and b/public/voice-clone/step-1.png differ
@@ -8,6 +8,7 @@ interface Props {
 	maxWidth?: string
 	/** By default tooltip stops click propagation (useful inside buttons/menus). Set false when parent needs the click. */
 	stopClickPropagation?: boolean
+	wrapperWidth?: string
 	placement?:
 		| 'bottom-end'
 		| 'bottom-start'
@@ -36,6 +37,7 @@ export const TooltipCustom: React.FC<Props> = ({
 	className,
 	maxWidth,
 	stopClickPropagation = true,
+	wrapperWidth,
 	fullWidthTrigger = false,
 	tapToOpenOnMobile = false,
 }) => {
@@ -43,9 +45,10 @@ export const TooltipCustom: React.FC<Props> = ({
 	const tapMode = Boolean(tapToOpenOnMobile && isTouchPrimary)
 	const [tapOpen, setTapOpen] = useState(false)
 
-	const triggerSpanStyle: React.CSSProperties | undefined = fullWidthTrigger
-		? { display: 'flex', width: '100%', minWidth: 0 }
-		: undefined
+	const triggerSpanStyle: React.CSSProperties | undefined = {
+		...(fullWidthTrigger ? { display: 'flex', width: '100%', minWidth: 0 } : {}),
+		...(wrapperWidth ? { display: 'block', width: wrapperWidth, maxWidth: '100%', minWidth: 0 } : {}),
+	}
 
 	const tooltip = (
 		<Tooltip
@@ -5,17 +5,17 @@ import Box from '@mui/material/Box'
 import Image from 'next/image'
 import Link from 'next/link'
 
+import { Message } from '#/entities/message'
+import { ImageModal } from '#/features/image-modal'
+import { ClientOnly, TooltipCustom } from '#/shared'
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
 import { useMessages } from '../model/use-messages'
 
 import { ImageIcons } from './image-icons'
 
 import styles from './image-messages-list.module.scss'
 
-import { Message } from '#/entities/message'
-import { ImageModal } from '#/features/image-modal'
-import { ClientOnly, TooltipCustom } from '#/shared'
-import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
-
 interface MessagesList {
 	device: 'mobile' | 'desktop'
 	images: Message[]
@@ -228,15 +228,19 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 
 											<TooltipCustom
 												placement='right'
-												title={message.content.length > (device === 'mobile' ? 35 : 30) ? message.content : ''}
+												wrapperWidth={device === 'desktop' ? '250px' : '291px'}
+												title={message.content}
 											>
 												<Typography
 													onClick={() => message.content.length > 0 && onPromptClick?.(message.content)}
 													sx={{
 														fontSize: '15px',
-														maxWidth: device === 'desktop' ? '250px' : '100%',
+														width: '100%',
 														marginTop: '12px',
 														color: '#A4AAB5',
+														whiteSpace: 'nowrap',
+														overflow: 'hidden',
+														textOverflow: 'ellipsis',
 														cursor: onPromptClick && message.content.length > 0 ? 'pointer' : 'default',
 													}}
 												>
@@ -138,24 +138,27 @@ export const VideoMessagesList: React.FC<MessagesList> = memo(({ device, videos,
 											<TooltipCustom
 												key={message.uid}
 												placement='right'
-												title={message.content.length > 30 ? message.content : ''}
+												wrapperWidth={device === 'desktop' ? '250px' : '291px'}
+												title={message.content}
 											>
 												<Typography
 													onClick={() => message.content.length > 0 && onPromptClick?.(message.content)}
 													sx={{
 														fontSize: '15px',
-														maxWidth: device === 'desktop' ? '250px' : '100%',
+														width: '100%',
 														marginTop: '12px',
 														color: '#A4AAB5',
+														whiteSpace: 'nowrap',
+														overflow: 'hidden',
+														textOverflow: 'ellipsis',
 														cursor: onPromptClick && message.content.length > 0 ? 'pointer' : 'default',
 													}}
 												>
 													{!loadedVideos.has(message.uid)
 														? ''
 														: message.content.length > 0
-														? message?.content.replaceAll('"', '').slice(0, 27)
+														? message?.content.replaceAll('"', '')
 														: 'описание отсутствует'}
-													{message?.content.length > 27 && loadedVideos.has(message.uid) && '...'}
 												</Typography>
 											</TooltipCustom>
 										</Box>