A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Merge branch 'fix-mobile-title-clipping' into trunk
author
Jeremy Herve
date
(Jun 10, 2026, 3:02 PM +0200)
commit
ca68c9a0
ca68c9a0feead2e325d11e581e538308f21534d4
parent
08ecda5d
08ecda5d468aabaf2c568f07457de9a22576459d
+30
-3
+23
-2
src/components/Studio.tsx
+23
-2
src/components/Studio.tsx
···
35
35
const [ publications, setPublications ] = useState< Publication[] | null >( null );
36
36
// Shared between mediaUpload (writes blob refs) and publish (reads them).
37
37
const registry = useRef< BlobRegistry >( new Map() ).current;
38
+
const titleRef = useRef< HTMLTextAreaElement >( null );
38
39
const ledeRef = useRef< HTMLTextAreaElement >( null );
39
40
40
41
// Load the writer's SkyPress publications (the publish targets / selector).
···
106
107
107
108
// Release the preview object URLs this session minted when the Studio unmounts.
108
109
useEffect( () => () => revokeBlobRegistry( registry ), [ registry ] );
110
+
111
+
// Grow the title textarea to fit its content so long titles wrap into view
112
+
// instead of clipping on one line (esp. on narrow mobile viewports). Layout
113
+
// effect so it sizes before paint — same reasoning as the lede below.
114
+
useLayoutEffect( () => {
115
+
const el = titleRef.current;
116
+
if ( ! el ) {
117
+
return;
118
+
}
119
+
el.style.height = 'auto';
120
+
el.style.height = `${ el.scrollHeight }px`;
121
+
}, [ title ] );
109
122
110
123
// Grow the lede textarea to fit its content (and on hydrate from an edit-load).
111
124
// Layout effect so it sizes before paint — avoids a one-row collapse flash when
···
213
226
}
214
227
} }
215
228
/>
216
-
<input
229
+
<textarea
230
+
ref={ titleRef }
217
231
className="studio__title"
218
-
type="text"
232
+
rows={ 1 }
219
233
placeholder="Add title"
220
234
aria-label="Article title"
221
235
value={ title }
236
+
// The title is a single-line string: let it wrap visually, but
237
+
// don't let Enter insert a literal newline into the stored value.
238
+
onKeyDown={ ( event ) => {
239
+
if ( event.key === 'Enter' ) {
240
+
event.preventDefault();
241
+
}
242
+
} }
222
243
onChange={ ( event ) => setTitle( event.target.value ) }
223
244
/>
224
245
<textarea
+7
-1
src/styles/editor-chrome.css
+7
-1
src/styles/editor-chrome.css
···
144
144
}
145
145
146
146
/* Borderless article title, sitting above the framed editor canvas — echoes the
147
-
block-editor post title (large display heading, no box). */
147
+
block-editor post title (large display heading, no box). A `<textarea>` (not a
148
+
single-line input) so long titles wrap and the field auto-grows to fit instead
149
+
of clipping on one line — it stays single-line semantically (Enter is blocked
150
+
in the markup). Auto-grows via JS, like the lede; resize/overflow off. */
148
151
.studio__title {
149
152
display: block;
150
153
max-width: var(--studio-measure);
···
159
162
font-size: clamp(1.9rem, 4vw, 2.6rem);
160
163
font-weight: 700;
161
164
line-height: 1.15;
165
+
resize: none;
166
+
overflow: hidden;
167
+
overflow-wrap: break-word;
162
168
}
163
169
.studio__title::placeholder {
164
170
color: var(--muted);