two column header controlled

public/akaunting-js/generalAction.js

@@ -440,3 +440,39 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
 //disable/enable icons ejected from data-truncate-marquee
 
 //margue animation for truncated text
+
+document.querySelectorAll('[data-page-title-first]').forEach((first) => {
+    document.querySelectorAll('[data-page-title-second]').forEach((second) => {
+        let title_truncate = first.querySelector('[data-title-truncate]');
+        
+        if (title_truncate !== null) {
+            if (title_truncate.clientWidth > first.clientWidth) {
+                title_truncate.style.width = first.clientWidth + 'px';
+                let subtract = title_truncate.clientWidth - 40;
+                title_truncate.style.width = subtract + 'px';
+            }
+
+            if (second.clientHeight > 44) {
+                first.classList.add('w-full', 'sm:w-6/12');
+            } else {
+                first.classList.remove('sm:w-6/12');
+            }
+
+            if (title_truncate.clientWidth > first.clientWidth) { 
+                let marquee = first.querySelector('[data-title-truncate]');
+
+                marquee.addEventListener('mouseover', function () {
+                    marquee.classList.add('animate-marquee');
+                    marquee.classList.remove('truncate');
+                    marquee.style.animationPlayState = 'running';
+                });
+    
+                marquee.addEventListener('mouseout', function () {
+                    marquee.style.animationPlayState = 'paused';
+                    marquee.classList.remove('animate-marquee');
+                    marquee.classList.add('truncate');
+                });
+            }
+        }
+    });
+});

public/css/app.css

@@ -53411,6 +53411,9 @@ button, input, optgroup, select, textarea{
   border-bottom-left-radius: 0.5rem;
   border-right-width: 0px;
 }
+.suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child{
+  margin-top: 0.5rem;
+}
 [data-dropdown-actions] {
         -webkit-transform: unset !important;
                 transform: unset !important;

resources/assets/sass/app.css

@@ -21,6 +21,11 @@
     .index-actions {
         @apply ltr:[&:nth-child(2)]:border-l ltr:[&:nth-child(3)]:border-l-0 rtl:[&:nth-child(2)]:border-r rtl:[&:nth-child(3)]:border-r-0 ltr:[&:first-child]:rounded-tl-lg ltr:[&:first-child]:rounded-bl-lg ltr:[&:first-child]:border-r-0 rtl:[&:first-child]:rounded-tr-lg rtl:[&:first-child]:rounded-br-lg rtl:[&:first-child]:border-l-0 ltr:[&:last-child]:rounded-tr-lg ltr:[&:last-child]:rounded-br-lg ltr:[&:last-child]:border-l-0 rtl:[&:last-child]:rounded-tl-lg rtl:[&:last-child]:rounded-bl-lg rtl:[&:last-child]:border-r-0;
     }
+
+    .suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child {
+        @apply mt-2;
+    }
+
     [data-dropdown-actions] {
         transform: unset !important;
     }

resources/views/components/layouts/admin/header.blade.php

@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
+        <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
-                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5">
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
                     <x-title>
                         {!! $title !!}
                     </x-title>
@@ -24,8 +24,7 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
+        <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
             @stack('header_button_start')
 
             {!! $buttons !!}
@@ -40,6 +39,5 @@
         </div>
     </div>
 </div>
-</div>
 
 @stack('header_end')

resources/views/components/title.blade.php

@@ -5,11 +5,11 @@
 @endphp
 
 @if ($slot_is_string >= $textSize && ! $slot_isHtml)
-    <x-tooltip id="page-title" placement="bottom" message="{!! $slot !!}">
-        <div class="truncate" style="width: 22rem;">
+<div class="overflow-x-hidden">
+    <div data-title-truncate class="truncate">
         {!! $slot !!}
     </div>
-    </x-tooltip>
+</div>
 @else 
     {!! $slot !!}
 @endif

resources/views/livewire/menu/favorite.blade.php

@@ -3,7 +3,7 @@
         <span
             id="{{ $favorited ? 'remove-from-favorite' : 'add-to-favorite' }}"
             @class([
-                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-2 cursor-pointer',
+                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-4 cursor-pointer',
                 'material-icons-outlined transform transition-all hover:scale-125' => ($favorited) ? false : true,
                 'material-icons' => (! $favorited) ? false : true,
             ])

safelist.txt

@@ -18,6 +18,7 @@ sm:min-h-500
 sm:max-w-4xl
 md:grid-cols-2
 lg:mt-2
+lg:mt-4
 lg:pl-24
 lg:my-12
 lg:mt-4