From acae8e5f7de8af0e7dd269c13af83152136c119d Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 6 Feb 2025 16:24:26 +0100
Subject: [PATCH] fix(ui): minor Modal component fixes

---
 front/src/components/ui/Modal.vue    |  2 +-
 front/src/components/ui/modal.scss   |  2 +-
 front/ui-docs/components/ui/modal.md | 40 +---------------------------
 3 files changed, 3 insertions(+), 41 deletions(-)

diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index 5790826ca..8d08495fa 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -82,7 +82,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
 
           <Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions || cancel" class="modal-actions">
             <slot name="actions" />
-            <Button v-if="cancel" autofocus :onClick="()=>{ isOpen = false }">
+            <Button v-if="cancel" secondary autofocus :onClick="()=>{ isOpen = false }">
                 {{ cancel }}
             </Button>
           </Layout>
diff --git a/front/src/components/ui/modal.scss b/front/src/components/ui/modal.scss
index ccf40f8c9..4bf9bb193 100644
--- a/front/src/components/ui/modal.scss
+++ b/front/src/components/ui/modal.scss
@@ -66,7 +66,7 @@
   }
 
   .modal-actions {
-    padding: 0.75rem 2rem 1rem;
+    padding: 0 2rem 1rem 2rem;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
diff --git a/front/ui-docs/components/ui/modal.md b/front/ui-docs/components/ui/modal.md
index 2e73cdaa8..1914f7136 100644
--- a/front/ui-docs/components/ui/modal.md
+++ b/front/ui-docs/components/ui/modal.md
@@ -334,42 +334,4 @@ primary
 
 ### Designing for small screens
 
-On slim phones, the content may only be 260px wide (Galaxy S5). Make sure the content wraps accordingly.
-
-### Long, scrolling content
-
-Consider using an indicator such as a line or a shadow to convey that there is content below the fold.
-
-```vue-html
-<Button primary @click="isOpen9 = true">
-  Open modal
-</Button>
-<Modal v-model="isOpen9" title="Long content">
-  Nested modal content
-  <section v-for="index in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
-    <h2>{{ index }}</h2>
-    <p>
-      <span v-for="_ in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">Lorem ipsum dolor sit amet.</span>
-    </p>
-  </section>
-  <template #actions>
-    <div style="background: currentcolor; opacity: .2; width: 100%; height: 1px;" > </div>
-  </template>
-</Modal>
-```
-
-<Button primary @click="isOpen9 = true">
-  Open modal
-</Button>
-<Modal v-model="isOpen9" title="Long content">
-  Nested modal content
-  <section v-for="index in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
-    <h2>{{ index }}</h2>
-    <p>
-      <span v-for="_ in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">Lorem ipsum dolor sit amet.</span>
-    </p>
-  </section>
-  <template #actions>
-    <div style="background: currentcolor; opacity: .2; width: 100%; height: 1px;" > </div>
-  </template>
-</Modal>
+On slim phones, with the default 32px paddings, the content may only be 260px wide (Galaxy S5). Make sure the content wraps accordingly.