Fixed width of play all text

packages/app/components/My.module.scss

@@ -295,7 +295,7 @@ $search-input-wudth-coeff: 1.5;
     .content {
       position: relative;
       display: inline;
-      width: auto;
+      width: fit-content;
 
       &.animate {
         animation-name: moving;

packages/app/components/My.tsx

@@ -441,7 +441,7 @@ function My({
               className={clsx(s.content, ticker ? s.animate : '')}
               style={{ animationDuration: `${animationDuration}s` }}
             >
-              <Typography nowrap theme={theme} variant="span" disabled fullWidth>
+              <Typography nowrap theme={theme} variant="span" disabled fitContent>
                 {!played && !paused ? locale.playAll : playedText}
               </Typography>
             </div>

packages/app/components/ui/Typography.module.scss

@@ -9,6 +9,10 @@
   &.full_width {
     width: 100%;
   }
+
+  &.fit_content {
+    width: fit-content;
+  }
 
   p, h1, h2, h3, h4, h5, h6, label, span {
     word-wrap: break-word;

packages/app/components/ui/Typography.tsx

@@ -23,6 +23,7 @@ function Typography<T extends TypographyVariant>({
   fullWidth,
   id,
   smaller,
+  fitContent,
 }: {
   variant: TypographyVariant;
   children: string | React.ReactNode;
@@ -40,6 +41,7 @@ function Typography<T extends TypographyVariant>({
   fullWidth?: boolean;
   id?: T extends 'label' ? string : string | undefined;
   smaller?: boolean;
+  fitContent?: boolean;
 }) {
   return (
     <div
@@ -54,6 +56,7 @@ function Typography<T extends TypographyVariant>({
         large ? s.large : '',
         nowrap ? s.nowrap : '',
         fullWidth ? s.full_width : '',
+        fitContent ? s.fit_content : '',
         align
           ? align === 'center'
             ? s.center
@@ -120,6 +123,7 @@ Typography.defaultProps = {
   fullWidth: undefined,
   id: undefined,
   smaller: undefined,
+  fitContent: undefined,
 };
 
 export default Typography;