fix: mobile view fixes

frontend/src/components/DiscussionView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative flex h-full flex-col" v-if="postId && discussion.doc">
-    <div class="mx-auto w-full max-w-3xl">
+    <div class="mx-auto w-full max-w-3xl px-4 sm:px-0">
       <div class="pb-16">
         <div class="pb-2 pt-14 flex w-full items-center sticky top-0 z-[1] bg-surface-white">
           <UserProfileLink class="mr-3" :user="discussion.doc.owner">
@@ -305,6 +305,12 @@ const actions = computed(() => [
     icon: 'link',
     onClick: copyLink,
   },
+  {
+    label: 'Bookmark',
+    icon: 'bookmark',
+    onClick: () => discussion.addBookmark.submit(),
+    condition: () => !discussion.doc?.is_bookmarked,
+  },
   {
     label: 'Pin discussion...',
     icon: 'arrow-up-left',
@@ -382,12 +388,6 @@ const actions = computed(() => [
       })
     },
   },
-  {
-    label: 'Bookmark',
-    icon: 'bookmark',
-    onClick: () => discussion.addBookmark.submit(),
-    condition: () => !discussion.doc?.is_bookmarked,
-  },
   {
     label: 'Remove Bookmark',
     icon: 'bookmark',

frontend/src/components/MobileLayout.vue

@@ -50,18 +50,16 @@ export default {
           isActive: /MyTasks|Task/g.test(this.$route.name),
         },
         {
-          name: 'Teams',
+          name: 'Spaces',
           icon: LucideLayoutGrid,
-          route: { name: 'Teams' },
+          route: { name: 'Spaces' },
           isActive: [
-            'Teams',
-            'TeamOverview',
-            'ProjectOverview',
-            'ProjectDiscussions',
-            'ProjectDiscussion',
-            'ProjectDiscussionNew',
-            'ProjectTasks',
-            'ProjectTaskDetail',
+            'Spaces',
+            'Space',
+            'SpaceDiscussions',
+            'SpaceDiscussion',
+            'SpaceTasks',
+            'SpaceTask',
           ].includes(this.$route.name),
         },
         {

frontend/src/components/SpaceTabs.vue

@@ -1,17 +1,20 @@
 <template>
-  <TabButtons :buttons="spaceTabs" v-model="currentTab" />
+  <Select class="min-w-32" v-if="screen.width < 640" :options="spaceTabs" v-model="currentTab" />
+  <TabButtons v-else :buttons="spaceTabs" v-model="currentTab" />
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { TabButtons } from 'frappe-ui'
+import { TabButtons, Select } from 'frappe-ui'
+import { useScreenSize } from '@/utils/composables'
 
 const props = defineProps<{
   spaceId: string
 }>()
 
 const currentRoute = useRoute()
 const router = useRouter()
+const screen = useScreenSize()
 
 const spaceTabs = [
   { label: 'Discussions', value: 'discussions' },

frontend/src/components/TaskList.vue

@@ -26,7 +26,7 @@
               'pointer-events-none': tasks.delete.loading && tasks.delete.params.name === d.name,
             }"
           >
-            <div class="w-full">
+            <div class="w-full min-w-0">
               <div class="flex min-w-0 items-start">
                 <LoadingIndicator
                   class="h-4 w-4 text-ink-gray-5"
@@ -65,8 +65,6 @@
                   class="flex min-w-0 items-center text-base leading-none text-ink-gray-5"
                 >
                   <div class="px-2 leading-none text-ink-gray-5">&middot;</div>
-                  <div>{{ d.team_title }}</div>
-                  <LucideChevronRight class="h-3 w-3 shrink-0 text-ink-gray-5" />
                   <div class="overflow-hidden text-ellipsis whitespace-nowrap">
                     {{ d.project_title }}
                   </div>
@@ -105,7 +103,7 @@
                 </template>
               </div>
             </div>
-            <div class="invisible group-hover:visible">
+            <div class="sm:invisible group-hover:visible">
               <DropdownMoreOptions :options="dropdownOptions(d.name)" placement="right" />
             </div>
           </router-link>
@@ -166,7 +164,7 @@ const isOpen = ref<Record<TaskStatus, boolean>>({
 const tasks = useList<GPTask>({
   url: '/api/v2/method/gameplan.gameplan.doctype.gp_task.gp_task.get_list',
   doctype: 'GP Task',
-  fields: ['*', 'project.title as project_title', 'team.title as team_title'],
+  fields: ['*', 'project.title as project_title'],
   filters: props.listOptions.filters,
   orderBy: props.listOptions.orderBy,
   limit: props.listOptions.pageLength,

frontend/src/pages/Discussions.vue

@@ -13,7 +13,7 @@
 
     <div class="mb-4 flex items-center px-3">
       <TabButtons :buttons="feedOptions" v-model="feedType" />
-      <div class="ml-auto space-x-2">
+      <div class="ml-auto flex space-x-2">
         <Button
           v-if="$refs.discussionListRef?.discussions.loading"
           :loading="$refs.discussionListRef?.discussions.loading"
@@ -27,7 +27,7 @@
       <DiscussionList
         ref="discussionListRef"
         routeName="ProjectDiscussion"
-        :listOptions="{ filters, orderBy }"
+        :listOptions="{ filters, orderBy: () => orderBy }"
         :key="JSON.stringify(filters)"
       />
     </KeepAlive>

frontend/src/pages/SpaceDiscussion.vue

@@ -4,7 +4,7 @@
       :items="[
         { label: 'Spaces', route: { name: 'Spaces' } },
         {
-          label: space.title,
+          label: space?.title,
           route: { name: 'SpaceDiscussions', params: { spaceId } },
         },
         { label: discussion?.doc?.title },

frontend/src/pages/SpaceList.vue

@@ -7,7 +7,7 @@
     </Button>
   </PageHeader>
   <NewSpaceDialog v-model="newSpaceDialog" />
-  <div class="mx-auto max-w-3xl sm:px-5 pb-80">
+  <div class="mx-auto max-w-3xl px-2 sm:px-5 pb-20 sm:pb-80">
     <div class="mt-5 flex px-2.5">
       <TabButtons :buttons="[{ label: 'Active' }, { label: 'Archived' }]" v-model="currentTab" />
     </div>

frontend/src/utils/composables.ts

@@ -0,0 +1,23 @@
+import { onMounted, onUnmounted, reactive } from 'vue'
+
+export function useScreenSize() {
+  const size = reactive({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  const onResize = () => {
+    size.width = window.innerWidth
+    size.height = window.innerHeight
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', onResize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize)
+  })
+
+  return size
+}