zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(ui): simplify image caption and alt input layout using full-width utility class

Browse Source
This commit is contained in:
Hyko
2026-04-26 16:28:40 -04:00
parent c3b54d9361
commit 67274687a3
1 changed files with 3 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/BlockEditor/blockTypes/Image.client.js
+3 -8
View File
@@ -325,18 +325,14 @@ function ImageBlock({ block, onChange, disabled }) {
)} )}
</div> </div>
</div> </div>
<div <div className="flex flex-col gap-1">
className="flex flex-col gap-1"
style={{ alignItems: align === 'full' ? 'stretch' : justify === 'flex-start' ? 'flex-start' : justify === 'flex-end' ? 'flex-end' : 'center' }}
>
<input <input
type="text" type="text"
placeholder="Légende (optionnelle)" placeholder="Légende (optionnelle)"
value={block.caption ?? ''} value={block.caption ?? ''}
onChange={handleCaptionChange} onChange={handleCaptionChange}
disabled={disabled} disabled={disabled}
className="px-1 py-0.5 text-sm italic text-neutral-600 dark:text-neutral-400 bg-transparent outline-none focus:border-b focus:border-neutral-300 dark:focus:border-neutral-700" className="w-full px-1 py-0.5 text-sm italic text-neutral-600 dark:text-neutral-400 bg-transparent outline-none focus:border-b focus:border-neutral-300 dark:focus:border-neutral-700"
style={{ minWidth: '12rem', maxWidth: '100%' }}
/> />
{!disabled && ( {!disabled && (
<input <input
@@ -344,8 +340,7 @@ function ImageBlock({ block, onChange, disabled }) {
placeholder="Texte alternatif (accessibilité)" placeholder="Texte alternatif (accessibilité)"
value={block.alt ?? ''} value={block.alt ?? ''}
onChange={handleAltChange} onChange={handleAltChange}
className="px-1 py-0.5 text-xs text-neutral-500 dark:text-neutral-500 bg-transparent outline-none focus:border-b focus:border-neutral-300 dark:focus:border-neutral-700" className="w-full px-1 py-0.5 text-xs text-neutral-500 dark:text-neutral-500 bg-transparent outline-none focus:border-b focus:border-neutral-300 dark:focus:border-neutral-700"
style={{ minWidth: '12rem', maxWidth: '100%' }}
/> />
)} )}
</div> </div>