fix: styling

locales/en-US.yml

@@ -2474,6 +2474,7 @@ _dataSaver:
     description: "If code highlighting notations are used in MFM, etc., they will not load until tapped. Syntax highlighting requires downloading the highlight definition files for each programming language. Therefore, disabling the automatic loading of these files is expected to reduce the amount of communication data."
 
 _ocr:
+  header: OCR
   button: OCR
   existingWarning: Existing caption will be overwritten
   dataWarning: OCR may require additional downloads

locales/index.d.ts

@@ -2649,6 +2649,7 @@ export interface Locale {
         };
     };
     "_ocr": {
+        "header": string;
         "button": string;
         "existingWarning": string;
         "dataWarning": string;

locales/ja-JP.yml

@@ -2532,6 +2532,7 @@ _dataSaver:
     description: "MFMなどでコードハイライト記法が使われている場合、タップするまで読み込まれなくなります。コードハイライトではハイライトする言語ごとにその定義ファイルを読み込む必要がありますが、それらが自動で読み込まれなくなるため、通信量の削減が見込めます。"
 
 _ocr:
+  header: OCR
   button: OCR
   existingWarning: 既存のキャプションは上書きされる
   dataWarning: OCRは追加ダウンロードが必要な場合があります。

packages/frontend/src/components/MkFileCaptionEditWindow.vue

@@ -20,12 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
 			<template #label>{{ i18n.ts.caption }}</template>
 		</MkTextarea>
-		<span :class="$style.ocrHeader">{{ i18n.ts._ocr.button }}</span>
 		<div v-if="file.type.startsWith('image/')" :class="$style.ocr">
-			<MkSelect v-model="ocrLanguage">
+			<span :class="$style.ocrHeader">{{ i18n.ts._ocr.header }}</span>
-				<option v-for="language in ocrLanguages" :key="language" :value="language">{{ i18n.ts._ocr.languages[language] ?? language }}</option>
+			<div :class="$style.ocrForm">
-			</MkSelect>
+				<MkSelect v-model="ocrLanguage">
-			<MkButton small @click="onOCR">{{ i18n.ts._ocr.button }}</MkButton>
+					<option v-for="language in ocrLanguages" :key="language" :value="language">{{ i18n.ts._ocr.languages[language] ?? language }}</option>
+				</MkSelect>
+				<MkButton @click="onOCR">{{ i18n.ts._ocr.button }}</MkButton>
+			</div>
 		</div>
 	</MkSpacer>
 </MkModalWindow>
@@ -85,6 +87,7 @@ async function onOCR() {
 	await os.promiseDialog((async () => {
 		const tesseract = await import('tesseract.js');
 		const worker = await tesseract.createWorker(ocrLanguage.value, undefined, {
+			// future improvement: it should be possible to use this logger function to provide a progress bar (via the m.progress property)
 			logger(m) { console.log('[OCR]', m); },
 			workerPath: '/assets/tesseract/worker.min.js',
 			corePath: '/assets/tesseract/core',
@@ -101,15 +104,18 @@ async function onOCR() {
 </script>
 
 <style lang="scss" module>
+.ocr {
+	margin-top: 8px;
+}
+
 .ocrHeader {
 	display: block;
-	margin-top: 8px;
 	margin-bottom: 2px;
 	font-size: 0.85em;
 	user-select: none;
 }
 
-.ocr {
+.ocrForm {
 	display: flex;
 	gap: 8px;