ui: New button to expand resolution text in a large modal

frontend/ui/src/lib/components/ResolutionModal.svelte

@@ -0,0 +1,26 @@
+<script>
+ import {
+     Icon,
+     Modal,
+     ModalBody,
+     ModalHeader
+ } from 'sveltestrap';
+ const toggle = () => (open = !open);
+
+ export let exercice = null;
+ export let open = false;
+ export let resolution;
+</script>
+
+<Modal isOpen={open} {toggle} size="xl">
+    <ModalHeader {toggle} class="bg-success text-light">
+        <Icon name="laptop-fill" />
+        Solution du défi
+        {#if exercice}
+            : {exercice.title}
+        {/if}
+    </ModalHeader>
+    <ModalBody>
+        {@html resolution}
+    </ModalBody>
+</Modal>

frontend/ui/src/routes/[theme]/[exercice]/+page.svelte

@@ -2,6 +2,7 @@
  import {
      Alert,
      Badge,
+     Button,
      Card,
      CardBody,
      CardHeader,
@@ -16,6 +17,7 @@
  import ExerciceHints from '$lib/components/ExerciceHints.svelte';
  import ExerciceSolved from '$lib/components/ExerciceSolved.svelte';
  import ExerciceVideo from '$lib/components/ExerciceVideo.svelte';
+ import ResolutionModal from '$lib/components/ResolutionModal.svelte';
 
  import { current_exercice } from '$lib/stores/exercices';
  import { my } from '$lib/stores/my';
@@ -23,6 +25,7 @@
  import { settings } from '$lib/stores/settings';
 
  let solved = {};
+ let openResolution = false;
 </script>
 
 {#if $current_exercice}
@@ -184,9 +187,17 @@
             {/if}
             {#if $my.exercices[$current_exercice.id].resolution || $my.exercices[$current_exercice.id].video_uri}
                 <Card class="border-success mb-2">
-                    <CardHeader class="bg-success text-light">
-                        <Icon name="laptop-fill" />
-                        Solution du défi
+                    <CardHeader class="bg-success text-light d-flex justify-content-between">
+                        <div>
+                            <Icon name="laptop-fill" />
+                            Solution du défi
+                        </div>
+                        {#if $my.exercices[$current_exercice.id].resolution}
+                            <Button color="success" size="sm" on:click={() => openResolution = true}>
+                                <Icon name="arrows-angle-expand" />
+                            </Button>
+                            <ResolutionModal exercice={$current_exercice} bind:open={openResolution} resolution={$my.exercices[$current_exercice.id].resolution} />
+                        {/if}
                     </CardHeader>
                     {#if $my.exercices[$current_exercice.id].resolution}
                         <CardBody>