fix: ipad safe area issues

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskview-ce-api-server",
-  "version": "1.48.1",
+  "version": "1.48.3",
   "scripts": {
     "dev": "bun run --watch ./server.ts",
     "start": "NODE_ENV=production node ./dist/taskview-server.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskview-ce-monorepo",
-  "version": "1.48.1",
+  "version": "1.48.3",
   "private": true,
   "description": "TaskView CE monorepo containing web, API, and packages",
   "workspaces": [

taskview-packages/taskview-api/package.json

@@ -1,7 +1,7 @@
 {
   "name": "taskview-api",
   "private": false,
-  "version": "1.45.0",
+  "version": "1.48.3",
   "type": "module",
   "repository": {
     "type": "git",

taskview-packages/taskview-mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskview-mcp",
-  "version": "1.45.0",
+  "version": "1.48.3",
   "description": "MCP (Model Context Protocol) server for TaskView — lets AI assistants (Claude Code, Claude Desktop, etc.) manage projects and tasks via the TaskView API",
   "type": "module",
   "bin": {

web/package.json

@@ -2,7 +2,7 @@
   "name": "web-nuxt-ui",
   "private": true,
   "type": "module",
-  "version": "1.48.1",
+  "version": "1.48.3",
   "scripts": {
     "dev": "vite",
     "build:packages": "pnpm --filter taskview-db-schemas build && pnpm --filter taskview-api build",

web/src/components/NotificationBell.vue

@@ -23,10 +23,10 @@
 
   <UModal
     v-model:open="isOpen"
-    :fullscreen="isMobile"
+    :fullscreen="isFullscreenModal"
     :ui="{
       overlay: 'sm:items-center sm:justify-center',
-      content: 'sm:max-w-lg sm:max-h-[80vh] sm:m-auto w-full',
+      content: isFullscreenModal ? 'w-full' : 'sm:max-w-lg sm:max-h-[80vh] sm:m-auto w-full',
       body: 'p-0!',
       footer: 'p-4!',
     }"
@@ -133,7 +133,7 @@ const router = useRouter()
 const notificationsStore = useNotificationsStore()
 const userStore = useUserStore()
 const orgStore = useOrganizationStore()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 const isOpen = ref(false)
 
 const notificationIconMap: Partial<Record<NotificationType, string>> = {

web/src/components/features/auth/ServerSelector.vue

@@ -40,9 +40,9 @@
 
     <UModal
       v-model:open="showAddDialog"
-      :fullscreen="isMobile"
+      :fullscreen="isFullscreenModal"
       :ui="{
-        content: 'sm:max-w-md sm:rounded-lg sm:m-auto w-full',
+        content: isFullscreenModal ? 'w-full' : 'sm:max-w-md sm:rounded-lg sm:m-auto w-full',
         footer: 'p-4!',
       }"
     >
@@ -106,8 +106,8 @@ import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 import { useAdditionalServer } from '@/composables/useAdditionalServer'
 
 const { t } = useI18n()
-const bp = useBreakpoints(breakpointsTailwind)
-const isMobile = bp.smaller('lg')
+const bp = useBreakpoints({ ...breakpointsTailwind, fullscreenModalMax: 1366 })
+const isFullscreenModal = bp.smallerOrEqual('fullscreenModalMax')
 
 const mainServer = ref('')
 const allServers = ref<string[]>([])

web/src/components/features/organizations/parts/OrgDetailModal.vue

@@ -1,8 +1,8 @@
 <template>
   <UModal
     v-model:open="open"
-    :fullscreen="isMobile"
-    :ui="{ content: 'max-w-lg max-h-[90vh] flex flex-col' }"
+    :fullscreen="isFullscreenModal"
+    :ui="{ content: isFullscreenModal ? 'flex flex-col' : 'max-w-lg max-h-[90vh] flex flex-col' }"
   >
     <template #content>
       <UCard
@@ -119,7 +119,7 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const toast = useToast()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 const orgStore = useOrganizationStore()
 const { isAdmin, isOwner } = useOrgPermissions(() => props.organization)
 

web/src/components/features/tasks/TvTaskDetailOverlay.vue

@@ -29,10 +29,10 @@
     <UModal
       v-else
       v-model:open="isOpen"
-      :fullscreen="isMobile"
+      :fullscreen="isFullscreenModal"
       :ui="{
         overlay: 'sm:items-center sm:justify-center ',
-        content: 'sm:max-w-[1100px] sm:max-h-[80vh] sm:m-auto w-full',
+        content: isFullscreenModal ? 'w-full' : 'sm:max-w-[1100px] sm:max-h-[80vh] sm:m-auto w-full',
         body: 'p-4!',
         footer: 'p-4!',
       }"
@@ -102,7 +102,7 @@ const { t } = useI18n()
 const tasksStore = useTasksStore()
 const goalsStore = useGoalsStore()
 const appStore = useAppStore()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 const { isOpen, closeTask } = useTaskDetailPanel()
 const { broadcastRemoval } = useSelectedTaskSync()
 

web/src/components/features/tasks/parts/TaskHistory.vue

@@ -81,9 +81,9 @@
 
     <UModal
       v-model:open="isDetailModalOpen"
-      :fullscreen="isMobile"
+      :fullscreen="isFullscreenModal"
       :title="t('history.details')"
-      :ui="{ content: 'sm:max-w-md' }"
+      :ui="{ content: isFullscreenModal ? '' : 'sm:max-w-md' }"
     >
       <template #body>
         <p class="text-sm whitespace-pre-wrap break-words">
@@ -117,7 +117,7 @@ const { t } = useI18n()
 const taskHistoryStore = useTaskHistory()
 const { canAccessTaskHistory, canRecoveryTaskHistory } = useGoalPermissions()
 const { activatorUi } = useNuxtUiTaskItemStyles()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 const { history } = storeToRefs(taskHistoryStore)
 
 const isExpanded = ref(false)

web/src/components/features/tasks/parts/TaskRecurrenceDialog.vue

@@ -1,9 +1,9 @@
 <template>
   <UModal
     v-model:open="open"
-    :fullscreen="isMobile"
+    :fullscreen="isFullscreenModal"
     :title="t('recurrence.title')"
-    :ui="{ content: 'sm:max-w-md' }"
+    :ui="{ content: isFullscreenModal ? '' : 'sm:max-w-md' }"
   >
     <template #body>
       <div class="flex flex-col gap-5">
@@ -91,7 +91,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const toast = useToast()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 
 const { canDeleteTask } = useGoalPermissions()
 const tasksStore = useTasksStore()

web/src/components/features/webhooks/parts/PayloadViewer.vue

@@ -1,8 +1,8 @@
 <template>
   <UModal
     v-model:open="isOpen"
-    :fullscreen="isMobile"
-    :ui="{ content: 'sm:max-w-3xl' }"
+    :fullscreen="isFullscreenModal"
+    :ui="{ content: isFullscreenModal ? '' : 'sm:max-w-3xl' }"
   >
     <template #header>
       <h3 class="text-lg font-semibold">
@@ -44,7 +44,7 @@ const props = defineProps<{
 const isOpen = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 const { copy } = useClipboard()
 
 const formattedPayload = computed(() => JSON.stringify(props.payload, null, 2))

web/src/components/features/webhooks/parts/WebhookDeliveries.vue

@@ -1,8 +1,8 @@
 <template>
   <UModal
     v-model:open="isOpen"
-    :fullscreen="isMobile"
-    :ui="{ content: 'sm:max-w-3xl', body: 'p-0!' }"
+    :fullscreen="isFullscreenModal"
+    :ui="{ content: isFullscreenModal ? '' : 'sm:max-w-3xl', body: 'p-0!' }"
   >
     <template #header>
       <div class="flex items-center justify-between w-full gap-3">
@@ -120,7 +120,7 @@ const props = defineProps<{
 const isOpen = defineModel<boolean>('open', { default: false })
 
 const { t } = useI18n()
-const { isMobile } = useTaskView()
+const { isFullscreenModal } = useTaskView()
 const webhooksStore = useWebhooksStore()
 
 const retrying = ref<number | null>(null)

web/src/composables/useTaskView.ts

@@ -5,13 +5,17 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 export const useTaskView = () => {
   const goalsStore = useGoalsStore()
-  const bp = useBreakpoints(breakpointsTailwind)
+  const bp = useBreakpoints({ ...breakpointsTailwind, fullscreenModalMax: 1366 })
   const isMobile = bp.smaller('lg')
+
   const isDesktop = bp.greaterOrEqual('lg')
-  
+  //iPad fixes
+  const isFullscreenModal = bp.smallerOrEqual('fullscreenModalMax')
+
   return {
     hasActiveGoals: computed(() => goalsStore.goals.length > 0),
     isMobile,
     isDesktop,
+    isFullscreenModal,
   }
 }

web/vite.config.ts

@@ -58,7 +58,14 @@ export default defineConfig({
         },
         dashboardPanel: {
           slots: {
-            body: 'p-2! pb-[calc(var(--tv-safe-area-inset-bottom)+var(--tv-safe-area-inset-top)+64px)]! lg:pb-0!'
+            // iPad
+            body: 'p-2! pb-[calc(var(--tv-safe-area-inset-bottom)+var(--tv-safe-area-inset-top)+64px)]! lg:pb-[calc(var(--tv-safe-area-inset-bottom)+8px)]!'
+          },
+        },
+        dashboardSidebar: {
+          slots: {
+            // iPad
+            footer: 'lg:pb-[calc(var(--tv-safe-area-inset-bottom)+8px)]',
           },
         },
         modal: {