fix: title overflow and mobile return icon alignment

Author: canerakdas

packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css

@@ -13,11 +13,16 @@
     items-center
     gap-1
     text-sm
-    font-semibold
-    break-all;
+    font-semibold;
+
+  .longName {
+    @apply break-all
+      sm:break-keep;
+  }
 
   &.return {
-    @apply font-open-sans;
+    @apply font-open-sans
+      shrink-0;
 
     svg {
       @apply size-4;

packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx

@@ -25,7 +25,11 @@ const SignatureHeader: FC<SignatureHeaderProps> = ({
         })}
       >
         {isReturn && <ArrowTurnDownLeftIcon />}
-        <span>
+        <span
+          className={classNames(styles.name, {
+            [styles.longName]: name.length > 16,
+          })}
+        >
           {name}:
           {optional && (
             <span