chore: Update feedback fixes

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -24,9 +24,11 @@ const onToggle = () => {
 </script>
 
 <template>
-  <div class="text-sm py-4 grid gap-2">
+  <div
+    class="text-sm mx-4 grid gap-2 py-3 rounded-[0.625rem] outline outline-1 outline-n-weak -outline-offset-1"
+  >
     <button
-      class="flex items-center select-none w-full m-0 cursor-grab justify-between drag-handle px-4 py-0 focus-visible:outline-none outline-none !transition-none"
+      class="flex items-center select-none w-full m-0 cursor-grab justify-between drag-handle px-3 py-0 focus-visible:outline-none outline-none !transition-none"
       @click.stop="onToggle"
     >
       <h5 class="text-n-slate-12 text-heading-3 mb-0 py-0 pr-2 pl-0">
@@ -47,8 +49,42 @@ const onToggle = () => {
         />
       </div>
     </button>
-    <div v-if="isOpen" :class="compact ? 'px-1' : 'px-4'">
-      <slot />
-    </div>
+    <Transition
+      enter-active-class="transition-[grid-template-rows,opacity,transform] duration-[400ms] ease-[cubic-bezier(0.23,1,0.32,1)]"
+      enter-from-class="grid-rows-[0fr] opacity-0 scale-[0.96] -translate-y-2"
+      enter-to-class="grid-rows-[1fr] opacity-100 scale-100 translate-y-0"
+      leave-active-class="transition-[grid-template-rows,opacity,transform] duration-[250ms] ease-[cubic-bezier(0.4,0,1,1)]"
+      leave-from-class="grid-rows-[1fr] opacity-100 scale-100"
+      leave-to-class="grid-rows-[0fr] opacity-0 scale-[0.96] -translate-y-1"
+      @before-enter="
+        el => {
+          el.style.overflow = 'hidden';
+          el.style.willChange = 'grid-template-rows, opacity, transform';
+        }
+      "
+      @after-enter="
+        el => {
+          el.style.overflow = 'visible';
+          el.style.willChange = 'auto';
+        }
+      "
+      @before-leave="
+        el => {
+          el.style.overflow = 'hidden';
+          el.style.willChange = 'grid-template-rows, opacity, transform';
+        }
+      "
+      @after-leave="
+        el => {
+          el.style.willChange = 'auto';
+        }
+      "
+    >
+      <div v-if="isOpen" class="grid origin-top">
+        <div class="min-h-0" :class="[compact ? 'px-0' : 'px-3']">
+          <slot />
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/ConversationActiveFiltersPreview.vue

@@ -141,7 +141,7 @@ const maxVisibleFilters = computed(() => {
           <div
             id="saveFilterTeleportTarget"
             class="absolute z-50 top-6"
-            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+            :class="{ 'ltr:left-0 rtl:right-0': isOnExpandedLayout }"
           />
         </div>
       </template>

app/javascript/dashboard/components/widgets/conversation/linear/IssuesList.vue

@@ -86,22 +86,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
-    <div v-if="hasIssues" class="pt-3 px-3 pb-2">
-      <NextButton
-        sm
-        slate
-        icon="i-lucide-plus"
-        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')"
-        @click="openCreateModal"
-      />
-    </div>
-
+  <div class="mt-1 px-3">
     <div v-if="isLoading" class="flex justify-center p-8">
       <Spinner />
     </div>
 
-    <div v-else-if="!hasIssues" class="mt-2 px-3 w-full">
+    <div v-else-if="!hasIssues" class="mt-2 w-full">
       <SidePanelEmptyState
         :message="$t('INTEGRATION_SETTINGS.LINEAR.NO_LINKED_ISSUES')"
       />
@@ -115,16 +105,27 @@ onMounted(() => {
       />
     </div>
 
-    <div v-else class="max-h-[300px] overflow-y-auto px-2">
+    <div v-else class="max-h-[300px] overflow-y-auto">
       <LinearIssueItem
         v-for="linkedIssue in linkedIssues"
         :key="linkedIssue.id"
-        class="px-1 pt-3 pb-4 border-b border-n-weak last:border-b-0"
+        class="border-b border-n-weak last:border-b-0"
         :linked-issue="linkedIssue"
         @unlink-issue="unlinkIssue"
       />
     </div>
 
+    <div v-if="hasIssues" class="pt-3 w-full">
+      <NextButton
+        sm
+        slate
+        icon="i-lucide-plus"
+        class="w-full"
+        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')"
+        @click="openCreateModal"
+      />
+    </div>
+
     <woot-modal
       v-model:show="shouldShowCreateModal"
       :on-close="closeCreateModal"

app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueItem.vue

@@ -44,7 +44,7 @@ const unlinkIssue = () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-4 py-3">
     <div class="flex flex-col w-full">
       <IssueHeader
         :identifier="issue.identifier"