[Perl] DAQ system for the FAPG.
fix prevent horizontal page overflow on mobile
- Set overflow-x: hidden on html and body to block page-level horizontal scroll - Constrain toolbar and toolbar-items with max-width: 100% - toolbar-items gets overflow-x-auto so graph controls scroll within the toolbar without pushing the page wider
Changed files
roles/dashboard/public/css/app.css
@@ -26,8 +26,23 @@
26
26
/* ----------------------------------------------------------------
27
27
Global font
28
28
---------------------------------------------------------------- */
29
Added:
html {
30
Added:
overflow-x: hidden;
31
Added:
}
32
Added:
29
33
body {
30
34
font-family: 'Figtree', system-ui, -apple-system, sans-serif;
35
Added:
overflow-x: hidden;
36
Added:
}
37
Added:
38
Added:
/* Toolbar graph controls — scroll horizontally without causing page overflow */
39
Added:
.graph-control-scroll {
40
Added:
max-width: 100%;
41
Added:
}
42
Added:
43
Added:
#toolbar {
44
Added:
max-width: 100%;
45
Added:
overflow: hidden;
31
46
}
32
47
33
48
/* ----------------------------------------------------------------
roles/dashboard/templates/dashboard/toolbar.html.ep
@@ -19,7 +19,7 @@
19
19
</nav>
20
20
% }
21
21
% if (defined $graph_control_aria_label) {
22
Removed:
<div class="toolbar-items d-flex align-items-center gap-2 ms-md-auto">
22
Added:
<div class="toolbar-items d-flex align-items-center gap-2 ms-md-auto overflow-x-auto mw-100">
23
23
%= include 'dashboard/graph-control', aria_label => $graph_control_aria_label
24
24
</div>
25
25
% }