abbiamo quasi finito, manca solo il fatto di non pixelare il disegno seppur mantenendo schermo intero nell'overlay per avere piu spazio per disegnare. E ovviamente quello nelle impostazioni per mettere keyword custom

HandTranscriptMd/src/embed.ts

@@ -682,18 +682,54 @@ function createPortalPanel(
 	});
 
 	// --- Funzioni condivise: usate dai bottoni e dal menu globale (⋮ Obsidian) ---
+	// Assicura che l'<img> sia dentro un div.hwm_clip-wrapper.
+	// Animiamo solo il wrapper (non il container span) così il ResizeObserver
+	// di Obsidian Mobile sul container non si attiva e non re-imposta le dimensioni dell'img.
+	// Usiamo img.parentElement come anchor per insertBefore: su Android l'img
+	// potrebbe non essere figlia diretta del container span.
+	const ensureWrapper = (): HTMLElement | null => {
+		let wrapper = container.querySelector('.hwm_clip-wrapper') as HTMLElement | null;
+		if (wrapper) return wrapper;
+		const img = container.querySelector('img');
+		if (!img || !img.parentElement) return null;
+		wrapper = document.createElement('div');
+		wrapper.className = 'hwm_clip-wrapper';
+		img.parentElement.insertBefore(wrapper, img);
+		wrapper.appendChild(img);
+		return wrapper;
+	};
+
 	const doExpand = () => {
 		isExpanded = true;
-		container.style.height   = '';
-		container.style.overflow = '';
+		const wrapper = container.querySelector('.hwm_clip-wrapper') as HTMLElement | null;
+		if (wrapper) {
+			// Anima da collapsedHeight verso l'altezza naturale (scrollHeight)
+			wrapper.style.height = wrapper.scrollHeight + 'px';
+			// A transizione finita rimuovi l'altezza esplicita: il wrapper torna flessibile
+			wrapper.addEventListener('transitionend', () => {
+				wrapper.style.height   = '';
+				wrapper.style.overflow = '';
+			}, { once: true });
+		}
+		container.classList.remove('hwm_is-collapsed');
 		collapseBtn.classList.remove('hwm_rotated');
 		collapseBtn.title = t('btn_collapse');
 		collapseBtn.setAttribute('data-hwm-key', 'btn_collapse');
 	};
 	const doCollapse = () => {
 		isExpanded = false;
-		container.style.height   = collapsedHeight + 'px';
-		container.style.overflow = 'hidden';
+		const wrapper = ensureWrapper();
+		if (wrapper) {
+			wrapper.style.overflow = 'hidden';
+			// Prima forza un'altezza esplicita pari all'altezza attuale (altrimenti
+			// la transizione partirebbe da 'auto' e non si animarebbe)
+			wrapper.style.height = wrapper.scrollHeight + 'px';
+			// Nel frame successivo imposta l'altezza target: la transizione CSS scatta
+			requestAnimationFrame(() => {
+				wrapper.style.height = collapsedHeight + 'px';
+			});
+		}
+		container.classList.add('hwm_is-collapsed');
 		collapseBtn.classList.add('hwm_rotated');
 		collapseBtn.title = t('btn_expand');
 		collapseBtn.setAttribute('data-hwm-key', 'btn_expand');

HandTranscriptMd/styles.css

@@ -625,6 +625,26 @@
 	font-size: 14px;
 }
 
+/* Wrapper per il collapse: contiene l'<img> e gestisce il clip.
+   Animiamo solo il wrapper, non il container span, così il ResizeObserver
+   di Obsidian Mobile non si attiva e non re-imposta le dimensioni dell'img. */
+.hwm_clip-wrapper {
+	width: 100%;
+	background: transparent !important;
+	transition: height 0.3s ease;
+}
+/* L'img dentro il wrapper non deve mai rimpicciolirsi: occupa la larghezza
+   piena e la sua altezza naturale, poi il wrapper la clippa dall'alto */
+.hwm_clip-wrapper img {
+	display: block !important;
+	width: 100% !important;
+	height: auto !important;
+	max-height: none !important;
+	min-height: 0 !important;
+	object-fit: unset !important;
+	background: transparent !important;
+}
+
 /* --- Suggest SVG reference: thumbnail + nome file --- */
 .hwm_svg-suggest-item {
 	display: flex;

NOTES.md

@@ -5,6 +5,49 @@ Per istruzioni, architettura e task aperti vedi `CLAUDE.md`.
 
 ---
 
+## ✅ Task completati (sessione 2026-03-24)
+
+### Fix focus perso dopo `window.confirm()` — RISOLTO ✅
+
+**Sintomo**: dopo aver confermato o annullato la cancellazione di un SVG (sia dal pannello portale inline che dalla `DrawingModal`), il focus veniva perso e non era più possibile scrivere nel documento Obsidian finché non si cambiava finestra.
+**Causa**: `window.confirm()` in Electron apre un dialogo nativo che rimuove il focus a livello OS dalla finestra Electron. Alla chiusura il focus non viene ripristinato automaticamente.
+**Fix — `DrawingModal`** (`src/editor-view.ts`): aggiunto metodo `showDeleteConfirm()` che crea un overlay `<div class="hwm_confirm-overlay">` dentro `contentEl` con due bottoni ("Elimina" e "Annulla"). Nessun dialogo nativo, nessun problema di focus. La `doDelete()` del modal usa ora `showDeleteConfirm()` + listener `vault.on('modify')` + `setTimeout(300)` per ripristinare il focus dopo la cancellazione del file.
+**Fix — pannello portale inline** (`src/embed.ts`): aggiunta funzione helper `showInlineConfirm(anchorEl, msg)` che crea lo stesso overlay `position:absolute` sopra l'elemento passato. Sia il bottone elimina del formato wiki che quello del formato legacy usano ora `showInlineConfirm`.
+**File**: `src/editor-view.ts`, `src/embed.ts`, `styles.css`, `src/locales/*.json` (chiavi `confirm_ok`, `confirm_cancel`).
+
+### Fix overlay di conferma non cliccabile nel pannello portale — RISOLTO ✅
+
+**Sintomo**: dopo la conversione all'overlay inline, i bottoni "Elimina" e "Annulla" non erano cliccabili nel pannello portale. Era anche possibile cliccare i bottoni sottostanti attraverso l'overlay.
+**Causa**: due problemi CSS simultanei — (1) l'overlay aveva `z-index: 10`, uguale al pannello portale; (2) il container span eredita `pointer-events: none` e l'overlay lo ereditava.
+**Fix CSS** (`styles.css`): `z-index: 100` sull'overlay + `pointer-events: auto !important` su `.hwm_confirm-overlay` e sui suoi bottoni.
+**File**: `styles.css`.
+
+### Fix letterboxing (bordi neri) su Android al comprimi/espandi — RISOLTO ✅
+
+**Sintomo**: su Android, comprimere o espandere un riquadro SVG creava grossi bordi neri ai lati dell'immagine invece di ridimensionarla correttamente.
+**Causa**: Obsidian Mobile ha un `ResizeObserver` interno sul container span. Quando `container.style.height` veniva modificato, il ResizeObserver si attivava e ricalcolava il layout dell'`<img>`, forzando proporzioni con letterbox.
+**Fix**: tecnica del "wrapper div" — `doCollapse`/`doExpand` in `embed.ts` creano (o riusano) un `<div class="hwm_clip-wrapper">` figlio diretto dell'`<img>`. L'animazione viene applicata sull'altezza del wrapper, mai sul container span, quindi il ResizeObserver non si attiva. `img.parentElement.insertBefore(wrapper, img)` per evitare eccezione silenziosa su Android dove `<img>` non è figlio diretto del container.
+**CSS aggiunto** (`.hwm_clip-wrapper`): `width: 100%; transition: height 0.3s ease;` e regole sull'img figlio per forzare `width: 100%; height: auto; object-fit: unset`.
+**File**: `src/embed.ts`, `styles.css`.
+
+### Animazione comprimi/espandi — AGGIUNTA ✅
+
+**Cosa**: l'altezza del wrapper si anima con `transition: height 0.3s ease`. Al collapse: `scrollHeight` → `collapsedHeight` (px) via `requestAnimationFrame`. All'expand: `collapsedHeight` → `scrollHeight`, poi `height: ''` e `overflow: ''` rimossi su `transitionend` per ripristinare il layout naturale.
+**File**: `src/embed.ts`, `styles.css`.
+
+### Rimozione nome branch dalla versione nelle impostazioni — RISOLTO ✅
+
+**Cosa**: il header della pagina impostazioni mostrava `v1.x.x — branch: overlay`. La stringa del branch è stata rimossa; ora mostra solo `v${this.plugin.manifest.version}`.
+**File**: `src/settings.ts` (rimossa costante `PLUGIN_BRANCH` dall'UI, variabile mantenuta per uso interno).
+
+### Preview SVG nella ricerca "Insert SVG reference" — AGGIUNTA ✅
+
+**Cosa**: il modal fuzzy-search per inserire un riferimento a un SVG esistente ora mostra una thumbnail dell'SVG a sinistra del nome file, invece del solo testo.
+**Implementazione**: override di `renderSuggestion()` in `SvgReferenceSuggest` (`src/main.ts`). Usa `app.vault.getResourcePath(file)` come `src` dell'`<img>`. CSS aggiunto: `.hwm_svg-suggest-item` (flex), `.hwm_svg-thumb` (48×48px, border-radius), `.hwm_svg-suggest-name`.
+**File**: `src/main.ts`, `styles.css`.
+
+---
+
 ## ✅ Task completati (sessione 2026-03-23)
 
 ### Tema automatico (bgMode 'auto')