WIP PWA for Grain
style: constrain comment sheet to feed max-width
+13
-8
+13
-8
src/components/organisms/grain-comment-sheet.js
+13
-8
src/components/organisms/grain-comment-sheet.js
···
36
36
background: rgba(0, 0, 0, 0.5);
37
37
z-index: 1000;
38
38
}
39
-
.sheet {
39
+
.sheet-container {
40
40
position: fixed;
41
41
bottom: 0;
42
42
left: 0;
43
43
right: 0;
44
+
display: flex;
45
+
justify-content: center;
46
+
z-index: 1001;
47
+
animation: slideUp 0.2s ease-out;
48
+
}
49
+
.sheet {
50
+
width: 100%;
51
+
max-width: var(--feed-max-width);
44
52
max-height: 70vh;
45
53
background: var(--color-bg-primary);
46
54
border-radius: 12px 12px 0 0;
47
55
display: flex;
48
56
flex-direction: column;
49
-
z-index: 1001;
50
-
animation: slideUp 0.2s ease-out;
51
57
}
52
58
@keyframes slideUp {
53
59
from { transform: translateY(100%); }
···
203
209
this.dispatchEvent(new CustomEvent('close'));
204
210
}
205
211
206
-
#handleOverlayClick(e) {
207
-
if (e.target === e.currentTarget) {
208
-
this.#handleClose();
209
-
}
212
+
#handleOverlayClick() {
213
+
this.#handleClose();
210
214
}
211
215
212
216
#handleInputChange(e) {
···
295
299
const userAvatarUrl = auth.user?.avatar?.url || '';
296
300
297
301
return html`
298
-
<div class="overlay" @click=${this.#handleOverlayClick}>
302
+
<div class="overlay" @click=${this.#handleOverlayClick}></div>
303
+
<div class="sheet-container">
299
304
<div class="sheet">
300
305
<div class="header">
301
306
<h2>Comments</h2>