From b27d34bbbf3ebb751c66654425eaa5465533e451 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 4 Feb 2025 15:09:08 +0100
Subject: [PATCH] fix(a11y): make modal actions responsive (wrap on slim
 screens)

---
 front/src/components/ui/Modal.vue | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index 3ab3fde1b..ec43681cd 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { type ColorProps, type DefaultProps, color } from '~/composables/color';
-import { watchEffect, computed, useSlots } from 'vue';
+import { watchEffect } from 'vue';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
 import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 const props = defineProps<{
   title: string,
@@ -12,19 +13,13 @@ const props = defineProps<{
   destructive?: true
 } & (ColorProps | DefaultProps)>()
 
-const slots = useSlots()
 const isOpen = defineModel<boolean>({ default:false })
 
-const modalClasses = computed(() => ({
-  'is-destructive': props.destructive,
-  'has-alert': !!slots.alert,
-  'over-popover': props.overPopover
-}))
-
 watchEffect(() =>
-  isOpen.value ?
-    document.querySelector('#app')?.setAttribute('inert', 'true') : document.querySelector('#app')?.removeAttribute('inert')
-  )
+  isOpen.value
+    ? document.querySelector('#app')?.setAttribute('inert', 'true')
+    : document.querySelector('#app')?.removeAttribute('inert')
+)
 
 onKeyboardShortcut('escape', () => isOpen.value = false)
 
@@ -43,8 +38,10 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
         <div @click.stop
           class="funkwhale modal"
           :class="[
-            modalClasses,
-            { 'destructive': destructive }
+            { 'is-destructive': destructive,
+              'has-alert': !!$slots.alert,
+              'over-popover': overPopover,
+            }
           ]"
           v-bind="color(props)"
         >
@@ -68,9 +65,9 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
 
             <slot />
           </div>
-          <div v-if="$slots.actions" class="modal-actions">
+          <Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions" class="modal-actions">
             <slot name="actions" />
-          </div>
+          </Layout>
           <Spacer :size="64" v-else />
         </div>
       </div>