Maintenance: Desktop view - Resizing pinned article breaks on tickets with a lot of articles

Co-authored-by: Ivan Stamenkovic <is@zammad.com>
Co-authored-by: Benjamin Scharf <bs@zammad.com>

app/frontend/apps/desktop/pages/ticket/__tests__/ticket-detail-view/ticket-detail-view-edit.spec.ts

@@ -333,7 +333,9 @@ describe('Ticket detail view', () => {
         'Internal',
       )
 
-      expect(complementary.firstChild).toHaveClass('bg-stripes')
+      expect(view.getByTestId('article-reply-stripes-panel')).toHaveClass(
+        'bg-stripes',
+      )
 
       const editor = view.getByRole('textbox', { name: 'Text' })
 

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue

@@ -175,45 +175,46 @@ defineExpose({
   <div
     v-if="newArticlePresent"
     ref="articlePanel"
-    class="mx-auto w-full"
+    class="relative mx-auto flex w-full flex-col"
     :class="{
       'max-w-6xl px-12 py-4': !pinned,
-      'sticky bottom-0 z-20 border-t border-t-neutral-300 bg-neutral-50 dark:border-t-gray-900 dark:bg-gray-500':
+      'sticky bottom-0 z-20 overflow-hidden border-t border-t-neutral-300 bg-neutral-50 dark:border-t-gray-900 dark:bg-gray-500':
         pinned,
     }"
+    :style="{
+      height: pinned ? `${articlePanelHeight}px` : 'auto',
+    }"
     aria-labelledby="article-reply-form-title"
     role="complementary"
     :aria-expanded="!pinned"
     v-bind="$attrs"
   >
+    <ResizeLine
+      v-if="pinned"
+      ref="resizeLine"
+      class="group absolute top-0 z-10 h-3 w-full"
+      :label="$t('Resize article panel')"
+      orientation="horizontal"
+      :values="{
+        max: articlePanelMaxHeight,
+        min: MINIMUM_ARTICLE_PANEL_HEIGHT,
+        current: articlePanelHeight,
+      }"
+      @mousedown-event="startResizing"
+      @touchstart-event="startResizing"
+      @dblclick="resetHeight"
+    />
     <div
+      class="flex h-full grow flex-col"
+      data-test-id="article-reply-stripes-panel"
       :class="{
-        'bg-stripes relative z-0 rounded-xl outline outline-1 outline-blue-700 before:rounded-2xl':
+        'bg-stripes relative z-10 rounded-xl outline outline-1 outline-blue-700 before:rounded-2xl':
           hasInternalArticle && !pinned,
         'border-stripes': hasInternalArticle && pinned,
       }"
-      :style="{
-        height: pinned ? `${articlePanelHeight}px` : 'auto',
-      }"
     >
-      <ResizeLine
-        v-if="pinned"
-        ref="resizeLine"
-        class="group absolute h-3 w-full -translate-y-1.5 py-1"
-        :label="$t('Resize article panel')"
-        orientation="horizontal"
-        :values="{
-          max: articlePanelMaxHeight,
-          min: MINIMUM_ARTICLE_PANEL_HEIGHT,
-          current: articlePanelHeight,
-        }"
-        @mousedown-event="startResizing"
-        @touchstart-event="startResizing"
-        @dblclick="resetHeight"
-      />
-
       <div
-        class="isolate flex h-full flex-col"
+        class="isolate flex h-full grow flex-col"
         :class="{
           'rounded-xl border border-neutral-300 bg-neutral-50 dark:border-gray-900 dark:bg-gray-500':
             !pinned,
@@ -254,7 +255,7 @@ defineExpose({
         <div
           id="ticketArticleReplyForm"
           ref="articleForm"
-          class="h-full px-3 pb-3"
+          class="grow px-3 pb-3"
           :class="{
             'overflow-y-auto': pinned,
             'my-[5px] px-4 pt-2': hasInternalArticle && pinned,
@@ -289,6 +290,7 @@ defineExpose({
 <style scoped>
 .border-stripes {
   position: relative;
+  z-index: -10;
   background-color: theme('colors.neutral.50');
 
   &::before {

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/__tests__/ArticleReply.spec.ts

@@ -174,32 +174,44 @@ describe('ArticleReply', () => {
       hasInternalArticle: true,
     })
 
-    const complementary = wrapper.getByRole('complementary', {
-      name: 'Reply',
-    })
-
-    expect(complementary.firstChild).toHaveClass('bg-stripes')
-    expect(complementary.firstChild).not.toHaveClass('border-stripes')
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).toHaveClass(
+      'bg-stripes',
+    )
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).not.toHaveClass(
+      'border-stripes',
+    )
 
     await wrapper.events.click(
       wrapper.getByRole('button', { name: 'Pin this panel' }),
     )
 
-    expect(complementary.firstChild).not.toHaveClass('bg-stripes')
-    expect(complementary.firstChild).toHaveClass('border-stripes')
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).not.toHaveClass(
+      'bg-stripes',
+    )
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).toHaveClass(
+      'border-stripes',
+    )
 
     await wrapper.rerender({
       hasInternalArticle: false,
     })
 
-    expect(complementary.firstChild).not.toHaveClass('bg-stripes')
-    expect(complementary.firstChild).not.toHaveClass('border-stripes')
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).not.toHaveClass(
+      'bg-stripes',
+    )
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).not.toHaveClass(
+      'border-stripes',
+    )
 
     await wrapper.events.click(
       wrapper.getByRole('button', { name: 'Unpin this panel' }),
     )
 
-    expect(complementary.firstChild).not.toHaveClass('bg-stripes')
-    expect(complementary.firstChild).not.toHaveClass('border-stripes')
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).not.toHaveClass(
+      'bg-stripes',
+    )
+    expect(wrapper.getByTestId('article-reply-stripes-panel')).not.toHaveClass(
+      'border-stripes',
+    )
   })
 })

i18n/zammad.pot

@@ -5032,7 +5032,7 @@ msgstr ""
 msgid "Discard changes"
 msgstr ""
 
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:240
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:241
 msgid "Discard unsaved reply"
 msgstr ""
 
@@ -11099,7 +11099,7 @@ msgstr ""
 msgid "Pick a name for the application, and we'll give you a unique token."
 msgstr ""
 
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:247
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:248
 msgid "Pin this panel"
 msgstr ""
 
@@ -11880,7 +11880,7 @@ msgstr ""
 msgid "Replacement agent"
 msgstr ""
 
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:237
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:238
 #: app/frontend/shared/entities/ticket-article/action/plugins/email.ts:87
 #: app/frontend/shared/entities/ticket-article/action/plugins/facebook.ts:20
 #: app/frontend/shared/entities/ticket-article/action/plugins/sms.ts:22
@@ -12036,7 +12036,7 @@ msgstr ""
 msgid "Resetting the order of your ticket overviews failed."
 msgstr ""
 
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:203
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:196
 msgid "Resize article panel"
 msgstr ""
 
@@ -16719,7 +16719,7 @@ msgstr ""
 msgid "Unlock"
 msgstr ""
 
-#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:247
+#: app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleReply.vue:248
 msgid "Unpin this panel"
 msgstr ""