1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* ============================================================
* rustio-admin / layout / responsive
*
* Mobile-first breakpoints — must be imported AFTER all layout
* and component files so its rules win the cascade.
*
* < 768px → sidebar collapses off-canvas behind a hamburger
* ≥ 768px → sidebar pinned, sticky to viewport
* ≥ 1280px → wider sidebar, more main padding, 3-col checkboxes
*
* Print rules live in print/print.css.
* ============================================================ */
/* Tables overflow horizontally on narrow screens. The rule was
* previously applied unconditionally, which produced a horizontal
* scrollbar at the bottom of every list card on desktop even when
* the table fitted the content area (the always-on `overflow-x:
* auto` overrides `.rio-list { overflow: hidden }` from tables.css
* because this file loads last). Scoped to the mobile breakpoint
* where it is actually load-bearing — at ≥ 768 px the list card
* keeps its `overflow: hidden` and the table fits the content
* area without a vestigial scroll track. */
{
}
}
/* Mobile: sidebar collapsed off-canvas behind a hamburger. The
* `flex: 0 0 var(--rio-sidebar-w)` from layout/sidebar.css is
* overridden here so the fixed-position drawer doesn't reserve
* track in the flex row. */
}
}
}
/* Tablet: sidebar pinned in the flex row, sticky to the viewport just
* below the topbar. `align-self: flex-start` opts out of the row's
* stretch so the element keeps a viewport-height box; `overflow-y:
* auto` lets long sidebar content scroll independently when the
* navigation outgrows the screen. */
{
}
}
}
}
/* Desktop: wider sidebar, more padding. Main content caps at ~1280px
* so a 4K monitor doesn't stretch a table row across the user's whole
* field of view — the eye loses the cell on the way back. */
{
}
}
}
}