Various QOL changes

src/lib/components/Reader/Cropper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
   import { cropperStore, getCroppedImg, updateLastCard, type Pixels } from '$lib/anki-connect';
+  import { settings } from '$lib/settings';
   import { Button, Modal, Spinner } from 'flowbite-svelte';
   import { onMount } from 'svelte';
   import Cropper from 'svelte-easy-crop';
@@ -43,7 +44,7 @@
 <Modal title="Crop image" bind:open on:{close}>
   {#if $cropperStore?.image && !loading}
     <div class=" flex flex-col gap-2">
-      <div class="relative w-full h-[55svh] sm:h-[70svh]">
+      <div class="relative w-full h-[55svh] sm:h-[65svh]">
         <Cropper
           zoomSpeed={0.5}
           maxZoom={10}
@@ -51,6 +52,12 @@
           on:cropcomplete={onCropComplete}
         />
       </div>
+      {#if $settings.ankiConnectSettings.grabSentence && $cropperStore?.sentence}
+        <p>
+          <b>Sentence:</b>
+          {$cropperStore?.sentence}
+        </p>
+      {/if}
       <Button on:click={onCrop}>Crop</Button>
       <Button on:click={close} outline color="light">Close</Button>
     </div>