From 045beb6b7054094a687277458e7f3d46d8219d99 Mon Sep 17 00:00:00 2001
From: arkohut <39525455+arkohut@users.noreply.github.com>
Date: Fri, 11 Oct 2024 00:04:17 +0800
Subject: [PATCH] fix(web): style update

---
 memos/plugins/ocr/ppocr.yaml |  1 +
 web/src/lib/Figure.svelte    | 16 ++++++++--------
 web/src/lib/OCRTable.svelte  | 33 ++++++++++++++++++---------------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/memos/plugins/ocr/ppocr.yaml b/memos/plugins/ocr/ppocr.yaml
index 5a93b55..3945096 100644
--- a/memos/plugins/ocr/ppocr.yaml
+++ b/memos/plugins/ocr/ppocr.yaml
@@ -6,6 +6,7 @@ Global:
     print_verbose: false
     min_height: 30
     width_height_ratio: 40
+    use_space_char: true
 
 Det:
     use_cuda: false
diff --git a/web/src/lib/Figure.svelte b/web/src/lib/Figure.svelte
index 0a0333d..c931c57 100644
--- a/web/src/lib/Figure.svelte
+++ b/web/src/lib/Figure.svelte
@@ -91,21 +91,21 @@
 
 <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
 	<div
-		class="relative top-10 mx-auto p-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
+		class="relative top-10 mx-auto px-16 py-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
 	>
 		<!-- Button container -->
 		<div class="group">
 			<button
-				class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-100 flex items-center justify-center z-50"
+				class="absolute left-2 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-85 flex items-center justify-center z-50"
 				on:click={onPrevious}
 			>
-				<ChevronLeft size={40} />
+				<ChevronLeft size={32} />
 			</button>
 			<button
-				class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-100 flex items-center justify-center z-50"
+				class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-xl w-12 h-12 opacity-0 group-hover:opacity-85 flex items-center justify-center z-50"
 				on:click={onNext}
 			>
-				<ChevronRight size={40} />
+				<ChevronRight size={32} />
 			</button>
 			<!-- Your modal content goes here -->
 		</div>
@@ -187,11 +187,11 @@
 				</div>
 			</ScrollArea>
 		</div>
-		<div class="absolute top-0 right-0 pt-4 pr-4">
-			<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
+		<div class="absolute top-0 right-0 pt-2 pr-2">
+			<button class="text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100" on:click={onClose}>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<X size={40} />
+				<X size={32} />
 			</button>
 		</div>
 	</div>
diff --git a/web/src/lib/OCRTable.svelte b/web/src/lib/OCRTable.svelte
index 3530382..1a758ff 100644
--- a/web/src/lib/OCRTable.svelte
+++ b/web/src/lib/OCRTable.svelte
@@ -4,19 +4,22 @@
 	 */
 	export let ocrData = [];
 </script>
-<table class="min-w-full bg-white">
-	<thead>
-		<tr>
-			<th class="py-2">Text</th>
-			<th class="py-2" style="width: 50px;">Score</th>
-		</tr>
-	</thead>
-	<tbody>
-		{#each ocrData as { dt_boxes, rec_txt, score }}
-			<tr class="hover:bg-gray-100">
-				<td class="border px-4 py-2">{rec_txt}</td>
-				<td class="border px-4 py-2" style="width: 50px;">{score.toFixed(3)}</td>
+
+<div class="overflow-x-auto">
+	<table class="w-full max-w-3xl bg-white table-fixed">
+		<thead>
+			<tr>
+				<th class="py-2 w-4/5">Text</th>
+				<th class="py-2 w-1/5">Score</th>
 			</tr>
-		{/each}
-	</tbody>
-</table>
\ No newline at end of file
+		</thead>
+		<tbody>
+			{#each ocrData as { dt_boxes, rec_txt, score }}
+				<tr class="hover:bg-gray-100">
+					<td class="border px-4 py-2 truncate">{rec_txt}</td>
+					<td class="border px-4 py-2 text-center">{score.toFixed(3)}</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
\ No newline at end of file