[FIX] web: several columns in line chart tooltips for large data

Currently tooltip goes out off the screen when the
graph view (in line mode) presents a large number
of groups.
The present commit splits the tooltip content in
three columns when the number of groups exceeds
20. This split is not done in mobile mode because
it is not an appropriate in that situation.

Co-authored-by: Mohammed Shekha <msh@openerp.com>

Related to Task: 1917958

closes odoo/odoo#30288

1 files changed, 21 insertions, 0 deletions

diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss
index f78df83cc83..7e7852a4d7f 100644
--- a/addons/web/static/src/scss/graph_view.scss
+++ b/addons/web/static/src/scss/graph_view.scss
@@ -33,6 +33,27 @@
                     }
                 }
             }
+
+            /* Use less than 50% of the screen area for tooltip and show legends in 3 column of 33% each */
+            &.o_tooltip_split_in_columns .nvtooltip {
+                max-width: 48%;
+                tbody {
+                    display: flex;
+                    flex-flow: wrap;
+                    tr {
+                        width: 33%;
+                        td {
+                            display: inline-block;
+                            &.key {
+                                min-width: 160px;
+                                max-width: 70%;
+                                overflow-x: hidden;
+                                text-overflow: ellipsis;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }