adjust for mobile

src/components/ui/button/index.vue

@@ -3,7 +3,11 @@
     <UTooltip :text="buttonProps?.tooltip">
       <UButton
         class="pointer-events-auto"
-        v-bind="{ ...buttonProps, ...$attrs }"
+        v-bind="{
+          ...{ size: isSmallScreen ? 'lg' : 'md' },
+          ...buttonProps,
+          ...$attrs,
+        }"
         @click="(e) => $emit('click', e)"
       >
         <template
@@ -28,4 +32,6 @@ interface IButtonProps extends /* @vue-ignore */ ButtonProps {
 }
 const buttonProps = defineProps<IButtonProps>()
 defineEmits<{ click: [Event] }>()
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>

src/components/ui/dialog/confirm.vue

@@ -3,8 +3,6 @@
     v-model:open="open"
     :title
     :description
-    :fullscreen="isSmallScreen"
-    :ui="{ header: 'pt-10 sm:pt-0', footer: 'mb-10 sm:mb-0' }"
   >
     <slot>
       <!-- <UiButton
@@ -49,8 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-
 defineProps<{
   abortIcon?: string
   abortLabel?: string
@@ -64,11 +60,6 @@ const open = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
 defineEmits(['confirm'])
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-// "smAndDown" gilt für sm, xs usw.
-const isSmallScreen = breakpoints.smaller('sm')
 </script>
 
 <i18n lang="yaml">

src/components/ui/dropdown/locale.vue

@@ -3,6 +3,7 @@
     arrow
     :items
     :ui="{}"
+    :size="isSmallScreen ? 'lg' : 'md'"
   >
     <UButton
       :icon="items.find((item) => item.label === locale)?.icon"
@@ -35,4 +36,6 @@ const items = computed<DropdownMenuItem[]>(() =>
     },
   })),
 )
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>

src/components/ui/dropdown/vault.vue

@@ -4,6 +4,8 @@
       icon="mdi:menu"
       color="neutral"
       variant="outline"
+      v-bind="$attrs"
+      size="xl"
     />
   </UDropdownMenu>
 </template>

src/components/ui/input/index.vue

@@ -5,6 +5,7 @@
     :readonly="props.readOnly"
     :leading-icon="props.leadingIcon"
     :ui="{ base: 'peer' }"
+    :size="isSmallScreen ? 'lg' : 'md'"
     @change="(e) => $emit('change', e)"
     @blur="(e) => $emit('blur', e)"
     @keyup="(e: KeyboardEvent) => $emit('keyup', e)"
@@ -48,7 +49,8 @@
 </template>
 
 <script setup lang="ts">
-import type { AcceptableValue, InputProps } from '@nuxt/ui'
+import type { InputProps } from '@nuxt/ui'
+import type { AcceptableValue } from '@nuxt/ui/runtime/types/utils.js'
 
 const value = defineModel<AcceptableValue | undefined>()
 
@@ -83,6 +85,8 @@ const filteredSlots = computed(() => {
 })
 
 watchImmediate(props, () => console.log('props', props))
+
+const { isSmallScreen } = storeToRefs(useUiStore())
 </script>
 
 <i18n lang="yaml">

src/components/ui/input/password.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { AcceptableValue } from '@nuxt/ui'
+import type { AcceptableValue } from '@nuxt/ui/runtime/types/utils.js'
 
 defineProps<{
   label?: string