long text control

presets.js

@@ -244,7 +244,7 @@ module.exports = {
               spin: 'spin 1000ms infinite',
               submit: 'submit 0.7s ease alternate infinite',
               submit_second: 'submit_second 0.7s ease alternate infinite',
-              marquee: 'marquee 15s linear infinite'
+              marquee: 'marquee 5s linear infinite'
           },
 
           transitionProperty: {

public/akaunting-js/generalAction.js

@@ -358,6 +358,7 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 }
 //Firefox show modal for icon set
 
+//margue animation for truncated text
 document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     let truncateText = truncate.textContent.split(" ").join("");
 
@@ -376,6 +377,14 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
         if (truncateText.length > 20) {
             truncate.style.animationPlayState = 'paused';
             truncate.classList.add('truncate');
+            truncate.classList.remove('animate-marquee');
         }
     });
+
+    if (document.body.clientWidth <= 991) {
+        if (truncate.parentElement.getAttribute('data-truncate-parent')) {
+            truncate.parentElement.remove();
+        }
+    }
 });
+//margue animation for truncated text

public/css/app.css

@@ -10036,8 +10036,8 @@ input[type="date"]::-webkit-inner-spin-button,
   }
 }
 .animate-marquee{
-  -webkit-animation: marquee 15s linear infinite;
-          animation: marquee 15s linear infinite;
+  -webkit-animation: marquee 5s linear infinite;
+          animation: marquee 5s linear infinite;
 }
 .cursor-auto{
   cursor: auto;

resources/views/common/items/index.blade.php

@@ -85,8 +85,10 @@
 
                                 <x-table.td class="w-6/12 sm:w-4/12">
                                     <x-slot name="first" class="flex items-center font-bold" override="class">
-                                        <div class="w-48 overflow-x-hidden truncate" data-truncate>
-                                            {{ $item->name }}
+                                        <div class="w-48 flex truncate" data-truncate-parent>
+                                            <div class="w-48 truncate" data-truncate>
+                                                {{ $item->name }}
+                                            </div>
                                         </div>
 
                                         @if (! $item->enabled)