better mobile display

next-ui/src/components/dialog/Confirm.vue

@@ -3,12 +3,14 @@
     v-model="showDialog"
     :activator="activator"
     :max-width="maxWidth"
+    :fullscreen="fullscreen"
   >
     <template #default="{ isActive }">
       <v-form
         v-model="formValid"
         @submit.prevent="submitForm(isActive)"
         :disabled="loading"
+        class="fill-height"
       >
         <v-card
           :title="title"
@@ -95,6 +97,7 @@ export interface DialogConfirmProps {
   activator?: Element | string
   loading?: boolean
   closeOnSave?: boolean
+  fullscreen?: boolean
 }
 
 const {
@@ -106,5 +109,6 @@ const {
   activator = undefined,
   loading = false,
   closeOnSave = true,
+  fullscreen = undefined,
 } = defineProps<DialogConfirmProps>()
 </script>

next-ui/src/components/dialog/ConfirmEdit.vue

@@ -3,6 +3,7 @@
     v-model="showDialog"
     :activator="activator"
     :max-width="maxWidth"
+    :fullscreen="fullscreen"
   >
     <template #default="{ isActive }">
       <v-confirm-edit
@@ -15,6 +16,7 @@
             v-model="formValid"
             @submit.prevent="submitForm(save)"
             :disabled="loading"
+            class="fill-height"
           >
             <v-card
               :title="title"
@@ -84,6 +86,7 @@ export interface DialogConfirmEditProps {
   activator?: Element | string
   loading?: boolean
   closeOnSave?: boolean
+  fullscreen?: boolean
 }
 
 const {
@@ -93,5 +96,6 @@ const {
   activator = undefined,
   loading = false,
   closeOnSave = true,
+  fullscreen = undefined,
 } = defineProps<DialogConfirmEditProps>()
 </script>

next-ui/src/pages/server/users.vue

@@ -12,6 +12,7 @@
       :items="users"
       :headers="headers"
       :hide-default-footer="hideFooter"
+      mobile-breakpoint="md"
     >
       <template #top>
         <v-toolbar flat>
@@ -38,7 +39,7 @@
       </template>
 
       <template #[`item.roles`]="{ value }">
-        <div class="d-flex ga-1">
+        <div class="d-flex ga-1 flex-wrap">
           <v-chip
             v-for="role in value"
             :key="role"
@@ -104,6 +105,7 @@ import { storeToRefs } from 'pinia'
 import { useDialogsStore } from '@/stores/dialogs'
 import { useMessagesStore } from '@/stores/messages'
 import { useIntl } from 'vue-intl'
+import { useDisplay } from 'vuetify'
 
 const intl = useIntl()
 
@@ -166,7 +168,9 @@ const { mutateAsync: mutateUser } = useUpdateUser()
 const { mutateAsync: mutateUserPassword } = useUpdateUserPassword()
 const { mutateAsync: mutateDeleteUser } = useDeleteUser()
 const { data: libraries } = useLibraries()
+
 const messagesStore = useMessagesStore()
+const display = useDisplay()
 
 enum ACTION {
   ADD,
@@ -183,6 +187,7 @@ function showDialog(action: ACTION, user?: components['schemas']['UserDto']) {
         title: 'Add User',
         maxWidth: 600,
         closeOnSave: false,
+        fullscreen: display.xs.value,
       }
       dialogConfirmEdit.value.slot = {
         component: markRaw(FormUserEdit),
@@ -210,6 +215,7 @@ function showDialog(action: ACTION, user?: components['schemas']['UserDto']) {
         subtitle: user?.email,
         maxWidth: 600,
         closeOnSave: false,
+        fullscreen: display.xs.value,
       }
       dialogConfirmEdit.value.slot = {
         component: markRaw(FormUserEdit),