x
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<style> /* ── Preview scaffold — overrides/supplements DS classes for inline display ── */ /* FAB is position:fixed in DS — compound selector overrides for inline preview */ .sp-preview-scaffold .tw-support-fab { position: relative; right: auto; bottom: auto; } /* Panel/overlay heights use non-standard pixel values not in Tailwind scale */ .sp-preview-panel { height: 560px; box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08); } .sp-preview-fp-wrap { height: 520px; } /* Sidebar width (280px) and composer card borders reference design tokens */ .sp-preview-sidebar { width: 280px; border-left: 1px solid var(--tw-color-neutral-200); } .sp-preview-sidebar-hdr { padding: 12px; border-bottom: 1px solid var(--tw-color-neutral-100); } .sp-preview-sidebar-body { padding: 8px 12px; flex: 1; overflow-y: auto; } .sp-preview-composer-card { border: 1px solid var(--tw-color-neutral-200); border-radius: 10px; } .sp-preview-composer-top { padding: 5px 8px 2px; } .sp-preview-composer-bottom { padding: 4px 8px 5px; } .sp-preview-composer-fp { border: 1px solid var(--tw-color-neutral-200); border-radius: 10px; padding: 8px 14px; } .sp-preview-ta { width: 100%; border: none; outline: none; resize: none; font-size: 13px; color: var(--tw-color-neutral-900); background: transparent; } .sp-preview-ta-fp { width: 100%; border: none; outline: none; resize: none; font-size: 14px; }</style><div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN: Support Panel</strong><br> <strong>COMPOSES:</strong> .tw-avatar · .tw-agent-chat-* · .tw-btn · .tw-badge · .tw-tag · .tw-card · .tw-tabs </p> <p class="tw:mb-0 tw:text-sm"> Shell structure for the Emma support chat. Provides FAB, floating panel, full-page overlay, and backdrop. Inner thread and composer content use existing DS components. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">FAB — Floating Action Button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>FAB states:</strong> Default (pulse ring visible, tooltip on hover) and open (ring hidden, ✕ shown). </p> </div> <div class="tw:flex tw:gap-16 tw:items-end tw:pb-4 sp-preview-scaffold"> <div class="tw:flex tw:flex-col tw:items-center tw:gap-3"> <p class="tw:text-sm tw:text-neutral-500">Default</p> <div class="tw:relative tw:w-12 tw:h-12"> <button class="tw-support-fab" type="button" aria-label="Chat with Emma"> <div class="tw-support-fab-ring"></div> <div class="tw-support-fab-av">E</div> </button> </div> </div> <div class="tw:flex tw:flex-col tw:items-center tw:gap-3"> <p class="tw:text-sm tw:text-neutral-500">Open</p> <div class="tw:relative tw:w-12 tw:h-12"> <button class="tw-support-fab tw-support-fab--open" type="button" aria-label="Chat with Emma"> <div class="tw-support-fab-ring"></div> <div class="tw-support-fab-av">E</div> </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-fab · .tw-support-fab-ring · .tw-support-fab-av · .tw-support-fab--open</code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Floating Panel</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shell only.</strong> Thread and composer content use existing DS components. Static snapshot — no JS. </p> </div> <div class="tw:relative tw:w-96 tw:rounded-2xl tw:flex tw:flex-col tw:overflow-hidden tw:bg-white sp-preview-panel"> <div class="tw-support-panel-hdr"> <div class="tw-avatar tw-avatar-primary tw-avatar-sm" role="img" aria-label="Emma, Online"> <span>E</span> <span class="tw-avatar-status tw-avatar-status-online"></span> </div> <div class="tw-support-panel-hdr-info"> <div class="tw-support-panel-hdr-name">Emma · Applicaa Support</div> <div class="tw-support-panel-hdr-status"> <i class="fa-solid fa-circle tw:text-green-400 tw:text-xs"></i> Online </div> </div> <div class="tw-support-panel-hdr-btns"> <button class="tw-support-panel-btn" type="button" aria-label="Expand to full screen"> <i class="fa-regular fa-expand"></i> </button> <button class="tw-support-panel-btn" type="button" aria-label="Close panel"> <i class="fa-regular fa-xmark"></i> </button> </div> </div> <div class="tw-support-panel-ctx"> <i class="fa-regular fa-location-dot tw:mr-1"></i> Year 12 Admissions · Greenford High School </div> <div class="tw-support-panel-thread" role="log" aria-label="Conversation"> <div class="tw-agent-chat-msg"> <div class="tw-avatar tw-avatar-primary tw:w-6 tw:h-6 tw:text-xs" role="img" aria-label="Emma"><span>E</span></div> <div class="tw-agent-chat-bubble"> <p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Hi! I'm Emma, your Admissions+ support assistant. How can I help today?</p> </div> </div> <div class="tw-agent-chat-msg tw-agent-chat-msg-user"> <div class="tw-agent-chat-bubble tw-agent-chat-bubble-user">How do I set offer conditions?</div> </div> </div> <div class="tw-support-panel-composer"> <div class="sp-preview-composer-card tw:bg-white"> <div class="sp-preview-composer-top"> <textarea class="sp-preview-ta" placeholder="Or ask a follow-up…" rows="1" aria-label="Message"></textarea> </div> <div class="sp-preview-composer-bottom tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:gap-1"> <button class="sp-tb-btn" type="button" aria-label="Attach file"><i class="fa-regular fa-paperclip"></i></button> <button class="sp-tb-btn" type="button" aria-label="Voice input"><i class="fa-regular fa-microphone"></i></button> </div> <button class="sp-send" type="button" aria-label="Send message"><i class="fa-regular fa-arrow-up"></i></button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-panel · .tw-support-panel-hdr · .tw-support-panel-hdr-info · .tw-support-panel-hdr-name · .tw-support-panel-hdr-status · .tw-support-panel-hdr-btns · .tw-support-panel-btn · .tw-support-panel-ctx · .tw-support-panel-thread · .tw-support-panel-composer</code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Full-Page Overlay</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shell only.</strong> Full-width chat takeover. Activity sidebar uses existing DS components. Static snapshot — no JS. </p> </div> <div class="tw:relative tw:w-full tw:rounded-xl tw:overflow-hidden tw:flex tw:flex-row tw:bg-white tw:border tw:border-neutral-200 sp-preview-fp-wrap"> <div class="tw-support-fp-main tw:relative"> <div class="tw-support-fp-hdr"> <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Emma, Online"> <span>E</span> <span class="tw-avatar-status tw-avatar-status-online"></span> </div> <div> <div class="tw:text-sm tw:font-semibold tw:text-neutral-900">Emma · Applicaa Support</div> <div class="tw:text-xs tw:text-neutral-500 tw:flex tw:items-center tw:gap-1"> <i class="fa-solid fa-circle tw:text-green-400"></i> Online </div> </div> <div class="tw:ml-auto tw:flex tw:gap-1"> <button class="tw-support-panel-btn tw:bg-neutral-100 tw:text-neutral-700 tw:hover:bg-neutral-200" type="button" aria-label="Float panel"> <i class="fa-regular fa-compress"></i> </button> <button class="tw-support-panel-btn tw:bg-neutral-100 tw:text-neutral-700 tw:hover:bg-neutral-200" type="button" aria-label="Close"> <i class="fa-regular fa-xmark"></i> </button> </div> </div> <div class="tw-support-fp-thread"> <div class="tw-agent-chat-msg"> <div class="tw-avatar tw-avatar-primary tw:w-6 tw:h-6 tw:text-xs" role="img" aria-label="Emma"><span>E</span></div> <div class="tw-agent-chat-bubble"> <p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Hi! I'm Emma, your Admissions+ support assistant.</p> </div> </div> </div> <div class="tw-support-fp-composer"> <div class="sp-preview-composer-fp tw:bg-white"> <textarea class="sp-preview-ta-fp" placeholder="Ask a question…" rows="1" aria-label="Message"></textarea> </div> </div> </div> <div class="sp-preview-sidebar tw:flex tw:flex-col"> <div class="sp-preview-sidebar-hdr"> <p class="tw:text-xs tw:font-semibold tw:text-neutral-500 tw:uppercase tw:tracking-wide">History</p> </div> <div class="sp-preview-sidebar-body"> <div class="tw-chat-history-item tw-chat-history-active tw:flex tw:justify-between tw:items-center tw:py-2"> <span class="tw:text-sm tw:text-neutral-800">Current session</span> <span class="tw-badge tw-badge-text"><i class="fa-solid fa-circle tw:text-green-500"></i> Active</span> </div> <div class="tw-chat-history-item tw:flex tw:justify-between tw:items-center tw:py-2"> <span class="tw:text-sm tw:text-neutral-500">14 Apr session</span> <span class="tw-badge tw-badge-text"><i class="fa-regular fa-circle-check"></i> Resolved</span> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-fp-main · .tw-support-fp-hdr · .tw-support-fp-thread · .tw-support-fp-composer</code> <br> <span class="tw:text-neutral-400 tw:text-xs tw:mt-1 tw:block">Note: <code>.tw-support-fp</code> (position:absolute;inset:0) wraps the above in production but is omitted from this static preview to avoid overflow.</span> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Backdrop & Utilities</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>.tw-support-backdrop</strong> — fixed overlay shown when panel is open. Add <code>.tw-support-backdrop--visible</code> to show it. <strong>.tw-support-bg-dimmed</strong> dims the background page. <strong>.tw-support-sidebar--open</strong> expands the activity sidebar to 360px. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-backdrop · .tw-support-backdrop--visible · .tw-support-bg-dimmed · .tw-support-hidden · .tw-support-sidebar--open</code> </div> </div></div>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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<style> /* ── Preview scaffold — overrides/supplements DS classes for inline display ── */ /* FAB is position:fixed in DS — compound selector overrides for inline preview */ .sp-preview-scaffold .tw-support-fab { position: relative; right: auto; bottom: auto; } /* Panel/overlay heights use non-standard pixel values not in Tailwind scale */ .sp-preview-panel { height: 560px; box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08); } .sp-preview-fp-wrap { height: 520px; } /* Sidebar width (280px) and composer card borders reference design tokens */ .sp-preview-sidebar { width: 280px; border-left: 1px solid var(--tw-color-neutral-200); } .sp-preview-sidebar-hdr { padding: 12px; border-bottom: 1px solid var(--tw-color-neutral-100); } .sp-preview-sidebar-body { padding: 8px 12px; flex: 1; overflow-y: auto; } .sp-preview-composer-card { border: 1px solid var(--tw-color-neutral-200); border-radius: 10px; } .sp-preview-composer-top { padding: 5px 8px 2px; } .sp-preview-composer-bottom { padding: 4px 8px 5px; } .sp-preview-composer-fp { border: 1px solid var(--tw-color-neutral-200); border-radius: 10px; padding: 8px 14px; } .sp-preview-ta { width: 100%; border: none; outline: none; resize: none; font-size: 13px; color: var(--tw-color-neutral-900); background: transparent; } .sp-preview-ta-fp { width: 100%; border: none; outline: none; resize: none; font-size: 14px; }</style><div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <%# Callout %> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN: Support Panel</strong><br> <strong>COMPOSES:</strong> .tw-avatar · .tw-agent-chat-* · .tw-btn · .tw-badge · .tw-tag · .tw-card · .tw-tabs </p> <p class="tw:mb-0 tw:text-sm"> Shell structure for the Emma support chat. Provides FAB, floating panel, full-page overlay, and backdrop. Inner thread and composer content use existing DS components. </p> </div> <%# ── Section 1: FAB States ── %> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">FAB — Floating Action Button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>FAB states:</strong> Default (pulse ring visible, tooltip on hover) and open (ring hidden, ✕ shown). </p> </div> <div class="tw:flex tw:gap-16 tw:items-end tw:pb-4 sp-preview-scaffold"> <%# Default state %> <div class="tw:flex tw:flex-col tw:items-center tw:gap-3"> <p class="tw:text-sm tw:text-neutral-500">Default</p> <div class="tw:relative tw:w-12 tw:h-12"> <button class="tw-support-fab" type="button" aria-label="Chat with Emma"> <div class="tw-support-fab-ring"></div> <div class="tw-support-fab-av">E</div> </button> </div> </div> <%# Open state %> <div class="tw:flex tw:flex-col tw:items-center tw:gap-3"> <p class="tw:text-sm tw:text-neutral-500">Open</p> <div class="tw:relative tw:w-12 tw:h-12"> <button class="tw-support-fab tw-support-fab--open" type="button" aria-label="Chat with Emma"> <div class="tw-support-fab-ring"></div> <div class="tw-support-fab-av">E</div> </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-fab · .tw-support-fab-ring · .tw-support-fab-av · .tw-support-fab--open</code> </div> </div> <%# ── Section 2: Floating Panel Shell ── %> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Floating Panel</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shell only.</strong> Thread and composer content use existing DS components. Static snapshot — no JS. </p> </div> <div class="tw:relative tw:w-96 tw:rounded-2xl tw:flex tw:flex-col tw:overflow-hidden tw:bg-white sp-preview-panel"> <div class="tw-support-panel-hdr"> <div class="tw-avatar tw-avatar-primary tw-avatar-sm" role="img" aria-label="Emma, Online"> <span>E</span> <span class="tw-avatar-status tw-avatar-status-online"></span> </div> <div class="tw-support-panel-hdr-info"> <div class="tw-support-panel-hdr-name">Emma · Applicaa Support</div> <div class="tw-support-panel-hdr-status"> <i class="fa-solid fa-circle tw:text-green-400 tw:text-xs"></i> Online </div> </div> <div class="tw-support-panel-hdr-btns"> <button class="tw-support-panel-btn" type="button" aria-label="Expand to full screen"> <i class="fa-regular fa-expand"></i> </button> <button class="tw-support-panel-btn" type="button" aria-label="Close panel"> <i class="fa-regular fa-xmark"></i> </button> </div> </div> <div class="tw-support-panel-ctx"> <i class="fa-regular fa-location-dot tw:mr-1"></i> Year 12 Admissions · Greenford High School </div> <div class="tw-support-panel-thread" role="log" aria-label="Conversation"> <div class="tw-agent-chat-msg"> <div class="tw-avatar tw-avatar-primary tw:w-6 tw:h-6 tw:text-xs" role="img" aria-label="Emma"><span>E</span></div> <div class="tw-agent-chat-bubble"> <p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Hi! I'm Emma, your Admissions+ support assistant. How can I help today?</p> </div> </div> <div class="tw-agent-chat-msg tw-agent-chat-msg-user"> <div class="tw-agent-chat-bubble tw-agent-chat-bubble-user">How do I set offer conditions?</div> </div> </div> <div class="tw-support-panel-composer"> <%# Composer stub — inner card uses prototype sp- classes (out of DS pattern scope) %> <div class="sp-preview-composer-card tw:bg-white"> <div class="sp-preview-composer-top"> <textarea class="sp-preview-ta" placeholder="Or ask a follow-up…" rows="1" aria-label="Message"></textarea> </div> <div class="sp-preview-composer-bottom tw:flex tw:items-center tw:justify-between"> <div class="tw:flex tw:gap-1"> <button class="sp-tb-btn" type="button" aria-label="Attach file"><i class="fa-regular fa-paperclip"></i></button> <button class="sp-tb-btn" type="button" aria-label="Voice input"><i class="fa-regular fa-microphone"></i></button> </div> <button class="sp-send" type="button" aria-label="Send message"><i class="fa-regular fa-arrow-up"></i></button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-panel · .tw-support-panel-hdr · .tw-support-panel-hdr-info · .tw-support-panel-hdr-name · .tw-support-panel-hdr-status · .tw-support-panel-hdr-btns · .tw-support-panel-btn · .tw-support-panel-ctx · .tw-support-panel-thread · .tw-support-panel-composer</code> </div> </div> <%# ── Section 3: Full-Page Overlay Shell ── %> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Full-Page Overlay</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Shell only.</strong> Full-width chat takeover. Activity sidebar uses existing DS components. Static snapshot — no JS. </p> </div> <div class="tw:relative tw:w-full tw:rounded-xl tw:overflow-hidden tw:flex tw:flex-row tw:bg-white tw:border tw:border-neutral-200 sp-preview-fp-wrap"> <div class="tw-support-fp-main tw:relative"> <div class="tw-support-fp-hdr"> <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Emma, Online"> <span>E</span> <span class="tw-avatar-status tw-avatar-status-online"></span> </div> <div> <div class="tw:text-sm tw:font-semibold tw:text-neutral-900">Emma · Applicaa Support</div> <div class="tw:text-xs tw:text-neutral-500 tw:flex tw:items-center tw:gap-1"> <i class="fa-solid fa-circle tw:text-green-400"></i> Online </div> </div> <div class="tw:ml-auto tw:flex tw:gap-1"> <button class="tw-support-panel-btn tw:bg-neutral-100 tw:text-neutral-700 tw:hover:bg-neutral-200" type="button" aria-label="Float panel"> <i class="fa-regular fa-compress"></i> </button> <button class="tw-support-panel-btn tw:bg-neutral-100 tw:text-neutral-700 tw:hover:bg-neutral-200" type="button" aria-label="Close"> <i class="fa-regular fa-xmark"></i> </button> </div> </div> <div class="tw-support-fp-thread"> <div class="tw-agent-chat-msg"> <div class="tw-avatar tw-avatar-primary tw:w-6 tw:h-6 tw:text-xs" role="img" aria-label="Emma"><span>E</span></div> <div class="tw-agent-chat-bubble"> <p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Hi! I'm Emma, your Admissions+ support assistant.</p> </div> </div> </div> <div class="tw-support-fp-composer"> <%# Composer stub — inner card uses prototype sp- classes (out of DS pattern scope) %> <div class="sp-preview-composer-fp tw:bg-white"> <textarea class="sp-preview-ta-fp" placeholder="Ask a question…" rows="1" aria-label="Message"></textarea> </div> </div> </div> <div class="sp-preview-sidebar tw:flex tw:flex-col"> <div class="sp-preview-sidebar-hdr"> <p class="tw:text-xs tw:font-semibold tw:text-neutral-500 tw:uppercase tw:tracking-wide">History</p> </div> <div class="sp-preview-sidebar-body"> <div class="tw-chat-history-item tw-chat-history-active tw:flex tw:justify-between tw:items-center tw:py-2"> <span class="tw:text-sm tw:text-neutral-800">Current session</span> <span class="tw-badge tw-badge-text"><i class="fa-solid fa-circle tw:text-green-500"></i> Active</span> </div> <div class="tw-chat-history-item tw:flex tw:justify-between tw:items-center tw:py-2"> <span class="tw:text-sm tw:text-neutral-500">14 Apr session</span> <span class="tw-badge tw-badge-text"><i class="fa-regular fa-circle-check"></i> Resolved</span> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-fp-main · .tw-support-fp-hdr · .tw-support-fp-thread · .tw-support-fp-composer</code> <br><span class="tw:text-neutral-400 tw:text-xs tw:mt-1 tw:block">Note: <code>.tw-support-fp</code> (position:absolute;inset:0) wraps the above in production but is omitted from this static preview to avoid overflow.</span> </div> </div> <%# ── Section 4: Backdrop & Utilities ── %> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Backdrop & Utilities</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>.tw-support-backdrop</strong> — fixed overlay shown when panel is open. Add <code>.tw-support-backdrop--visible</code> to show it. <strong>.tw-support-bg-dimmed</strong> dims the background page. <strong>.tw-support-sidebar--open</strong> expands the activity sidebar to 360px. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-neutral-600"> <code>.tw-support-backdrop · .tw-support-backdrop--visible · .tw-support-bg-dimmed · .tw-support-hidden · .tw-support-sidebar--open</code> </div> </div></div>No notes provided.
No params configured.