fix(styling): three scrollbars in single ticket view

desk/src/components/UniInput2.vue

@@ -75,6 +75,12 @@ const component = computed(() => {
         },
       ],
     });
+  } else if (
+    ["Long Text", "Small Text", "Text"].includes(props.field.fieldtype)
+  ) {
+    return h(FormControl, {
+      type: "textarea",
+    });
   } else {
     return h(FormControl);
   }

desk/src/components/ticket/TicketAgentActivities.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex-1 flex flex-col">
-    <ActivityHeader :title="title" />
-    <div v-if="activities.length">
+  <ActivityHeader :title="title" />
+  <div class="flex flex-col flex-1 overflow-y-auto">
+    <div v-if="activities.length" class="activities flex-1 h-full mt-1">
       <div v-for="(activity, i) in activities" :key="activity.key">
         <!-- single activity -->
         <div

desk/src/components/ticket/TicketAgentFields.vue

@@ -107,12 +107,6 @@ const options = computed(() => {
       type: "select",
       placeholder: "Select Customer",
     },
-    {
-      field: "subject",
-      label: "Subject",
-      type: "textarea",
-      placeholder: "Problem in XYZ",
-    },
   ];
 });
 

desk/src/pages/TicketAgent.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <LayoutHeader v-if="ticket.data">
       <template #left-header>
-        <Breadcrumbs :items="breadcrumbs" />
+        <Breadcrumbs :items="breadcrumbs" class="breadcrumbs" />
       </template>
       <template #right-header>
         <CustomActions
@@ -43,11 +43,16 @@
         </Dropdown>
       </template>
     </LayoutHeader>
-    <div v-if="ticket.data" class="flex h-screen overflow-hidden">
+    <div v-if="ticket.data" class="flex h-full overflow-hidden">
       <div class="flex flex-1 flex-col">
         <!-- ticket activities -->
         <div class="overflow-y-auto flex-1">
-          <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs" class="h-full">
+          <Tabs
+            v-model="tabIndex"
+            v-slot="{ tab }"
+            :tabs="tabs"
+            class="!h-full"
+          >
             <TicketAgentActivities
               ref="ticketAgentActivitiesRef"
               :activities="filterActivities(tab.name)"
@@ -97,35 +102,24 @@
         }
       "
     />
-    <Dialog v-model="showSubjectDialog">
-      <template #body-title>
-        <h3>Rename</h3>
-      </template>
+    <!-- Rename Subject Dialog -->
+    <Dialog v-model="showSubjectDialog" :options="{ title: 'Rename Subject' }">
       <template #body-content>
-        <FormControl
-          v-model="subjectInput"
-          :type="'text'"
-          size="sm"
-          variant="subtle"
-          :disabled="false"
-          label="New Subject"
-        />
-      </template>
-      <template #actions>
-        <Button
-          variant="solid"
-          :disabled="!subjectInput"
-          :loading="isLoading"
-          @click="
-            () => {
-              updateTicket('subject', subjectInput);
-              showSubjectDialog = false;
-            }
-          "
-        >
-          Confirm
-        </Button>
-        <Button class="ml-2" @click="showSubjectDialog = false"> Close </Button>
+        <div class="flex flex-col flex-1 gap-3">
+          <FormControl
+            v-model="renameSubject"
+            type="textarea"
+            size="sm"
+            variant="subtle"
+            :disabled="false"
+          />
+          <Button
+            variant="solid"
+            :loading="isLoading"
+            label="Rename"
+            @click="handleRename"
+          />
+        </div>
       </template>
     </Dialog>
   </div>
@@ -165,7 +159,7 @@ const ticketStatusStore = useTicketStatusStore();
 const { getUser } = useUserStore();
 const ticketAgentActivitiesRef = ref(null);
 const communicationAreaRef = ref(null);
-const subjectInput = ref(null);
+const renameSubject = ref("");
 const isLoading = ref(false);
 
 const props = defineProps({
@@ -202,9 +196,9 @@ const ticket = createResource({
         };
       });
     }
+    renameSubject.value = data.subject;
   },
   onSuccess: (data) => {
-    subjectInput.value = data.subject;
     setupCustomActions(data, {
       doc: data,
     });
@@ -215,11 +209,19 @@ const breadcrumbs = computed(() => {
   let items = [{ label: "Tickets", route: { name: "TicketsAgent" } }];
   items.push({
     label: ticket.data?.subject,
-    route: { name: "TicketAgent" },
+    onClick: () => {
+      showSubjectDialog.value = true;
+    },
   });
   return items;
 });
 
+const handleRename = () => {
+  if (renameSubject.value === ticket.data?.subject) return;
+  updateTicket("subject", renameSubject.value);
+  showSubjectDialog.value = false;
+};
+
 watch(
   () => showFullActivity.value,
   (value) => {
@@ -384,3 +386,13 @@ onUnmounted(() => {
   document.title = "Helpdesk";
 });
 </script>
+
+<style>
+.breadcrumbs button {
+  background-color: inherit !important;
+  &:hover,
+  &:focus {
+    background-color: inherit !important;
+  }
+}
+</style>