wip

resources/css/filament/company/tooltip.css

@@ -1,35 +1,62 @@
-.es-toolip .tippy-arrow {
+.es-tooltip .tippy-arrow {
     border-color: inherit;
 }
 
-.es-tooltip .tippy-box[data-placement^='right'] > .tippy-arrow::before {
+.es-tooltip .tippy-box > .tippy-arrow::before {
     transform: scale(1.75);
 }
 
-.es-tooltip .tippy-box[data-placement^='right'] > .tippy-arrow::after {
+.es-tooltip .tippy-box > .tippy-arrow::after {
     content: "";
     z-index: -1;
     position: absolute;
     border-color: transparent;
     border-style: solid;
+    border-width: 8px;
+    transform: scale(1.75);
+}
+
+.es-tooltip .tippy-box[data-placement^='right'] > .tippy-arrow::after {
+    left: -11px;
     top: 0;
     border-width: 8px 8px 8px 0;
     border-right-color: inherit;
-    left: -11px;
-    transform: scale(1.75);
 }
 
+.es-tooltip .tippy-box[data-placement^='left'] > .tippy-arrow::after {
+    right: -11px;
+    top: 0;
+    border-width: 8px 0 8px 8px;
+    border-right-color: transparent;
+    border-left-color: inherit;
+}
+
+.es-tooltip .tippy-box[data-placement^='top'] > .tippy-arrow::after {
+    bottom: -11px;
+    left: 0;
+    border-width: 8px 8px 0;
+    border-right-color: transparent;
+    border-top-color: inherit;
+}
+
+.es-tooltip .tippy-box[data-placement^='bottom'] > .tippy-arrow::after {
+    top: -11px;
+    left: 0;
+    border-width: 0 8px 8px;
+    border-right-color: transparent;
+    border-bottom-color: inherit;
+}
 
-.es-tooltip .tippy-box[data-theme~='light'][data-placement^='right'] {
+.es-tooltip .tippy-box {
     border-radius: 8px;
+}
+
+.es-tooltip .tippy-box[data-theme~='light'] {
     border: 1px solid #d4dde3;
-    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
-.es-tooltip .tippy-box[data-theme~='dark'][data-placement^='right'] {
-    border-radius: 8px;
+.es-tooltip .tippy-box[data-theme~='dark'] {
     border: 1px solid #555555;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .7);
 }
 
 .es-close-tooltip {

resources/views/components/company/tables/reports/account-transactions.blade.php

@@ -7,7 +7,7 @@
     $iconPosition = \Filament\Support\Enums\IconPosition::After;
 @endphp
 
-<table class="w-full table-auto divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full table-auto min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <x-company.tables.header :headers="$report->getHeaders()" :alignmentClass="[$report, 'getAlignmentClass']"/>
     @foreach($report->getCategories() as $categoryIndex => $category)
         <tbody class="divide-y divide-gray-200 dark:divide-white/5">

resources/views/components/company/tables/reports/balance-sheet-summary.blade.php

@@ -1,4 +1,4 @@
-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">

resources/views/components/company/tables/reports/balance-sheet.blade.php

@@ -1,4 +1,4 @@
-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">

resources/views/components/company/tables/reports/cash-flow-statement-summary.blade.php

@@ -1,4 +1,4 @@
-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">
@@ -35,7 +35,7 @@
     @endforeach
 </table>
 
-<table class="w-full table-fixed divide-y border-t divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y border-t divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">

resources/views/components/company/tables/reports/cash-flow-statement.blade.php

@@ -1,4 +1,4 @@
-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">
@@ -139,7 +139,7 @@
     <x-company.tables.footer :totals="$report->getOverallTotals()" :alignment-class="[$report, 'getAlignmentClass']"/>
 </table>
 
-<table class="w-full table-fixed divide-y border-t divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y border-t divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">

resources/views/components/company/tables/reports/income-statement-summary.blade.php

@@ -1,4 +1,4 @@
-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         <col span="1" style="width: 65%;">
         <col span="1" style="width: 35%;">

resources/views/components/company/tables/reports/income-statement.blade.php

@@ -1,4 +1,4 @@
-<table class="w-full table-fixed divide-y divide-gray-200 dark:divide-white/5">
+<table class="w-full min-w-[50rem] divide-y divide-gray-200 dark:divide-white/5">
     <colgroup>
         @if(array_key_exists('account_code', $report->getHeaders()))
             <col span="1" style="width: 20%;">

resources/views/components/tooltip.blade.php

@@ -19,6 +19,26 @@
             theme: $store.theme,
             placement: '{{ $placement }}',
             maxWidth: {{ $maxWidth }},
+            popperOptions: {
+                strategy: 'fixed',
+                modifiers: [
+                    {
+                        name: 'flip',
+                        enabled: true,
+                        options: {
+                            fallbackPlacements: ['left', 'top', 'bottom'],
+                        }
+                    },
+                    {
+                        name: 'preventOverflow',
+                        enabled: true,
+                        options: {
+                            boundary: 'viewport',
+                            padding: 8
+                        }
+                    }
+                ]
+            }
         }">
         <x-filament::icon-button
             :icon="$icon"

resources/views/filament/company/pages/accounting/chart.blade.php

@@ -20,7 +20,7 @@
                     <div class="es-table__header-ctn"></div>
                     <div class="es-table__content overflow-x-auto">
                         <table
-                            class="es-table w-full min-w-[80rem] divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
+                            class="es-table w-full min-w-[70rem] divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                             <colgroup>
                                 <col span="1" style="width: 12.5%;">
                                 <col span="1" style="width: 20%;">