WIP PWA for Grain
feat: add header title to create gallery and fix container widths
- Add "Create a gallery" title next to back arrow on create page
- Apply feed-max-width constraint to create gallery and settings pages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+21
-3
+18
-3
src/components/pages/grain-create-gallery.js
+18
-3
src/components/pages/grain-create-gallery.js
···
51
51
static styles = css`
52
52
:host {
53
53
display: block;
54
+
max-width: var(--feed-max-width);
55
+
margin: 0 auto;
54
56
min-height: 100vh;
55
57
min-height: 100dvh;
58
+
background: var(--color-bg-primary);
56
59
}
57
60
.header {
58
61
display: flex;
···
61
64
padding: var(--space-sm);
62
65
border-bottom: 1px solid var(--color-border);
63
66
}
67
+
.header-left {
68
+
display: flex;
69
+
align-items: center;
70
+
gap: var(--space-xs);
71
+
}
64
72
.back-button {
65
73
background: none;
66
74
border: none;
···
68
76
margin-left: -8px;
69
77
cursor: pointer;
70
78
color: var(--color-text-primary);
79
+
}
80
+
.header-title {
81
+
font-size: var(--font-size-md);
82
+
font-weight: 600;
71
83
}
72
84
.photo-strip {
73
85
display: flex;
···
268
280
render() {
269
281
return html`
270
282
<div class="header">
271
-
<button class="back-button" @click=${this.#handleBack}>
272
-
<grain-icon name="back" size="20"></grain-icon>
273
-
</button>
283
+
<div class="header-left">
284
+
<button class="back-button" @click=${this.#handleBack}>
285
+
<grain-icon name="back" size="20"></grain-icon>
286
+
</button>
287
+
<span class="header-title">Create a gallery</span>
288
+
</div>
274
289
<grain-button
275
290
?disabled=${!this.#canPost}
276
291
?loading=${this._posting}
+3
src/components/pages/grain-settings.js
+3
src/components/pages/grain-settings.js