When creating a ticket by email that includes a wide table, the table gets truncated with no horizontal scrolling available, making some columns invisible.

Infos:

  • Used Zammad version: 6.2.0
  • Used Zammad installation type: (source, package, docker-compose, …) : package
  • Operating system: Ubuntu 22.04
  • Browser + version: Google Chrome

Expected behavior:

  • When a user creates a ticket by email that contains a table with a width larger than the viewport, the system should handle the display of such tables in a manner that ensures all content is accessible and visible. The expected behavior includes:
  1. Horizontal Scrolling:
    Users should be able to scroll horizontally to view all columns of the table, ensuring that no data is hidden due to limited viewport width.
  2. Responsive Design:
    On smaller screens, the table should adjust accordingly, perhaps by allowing horizontal scrolling or stacking columns vertically to maintain readability and accessibility.
  3. Clear Visual Indicators:
    There should be clear indicators (such as a scrollbar or arrows) that show users they can scroll horizontally to view more content.

Actual behavior:

  • When a user creates a ticket by email that contains a table with a width larger than the viewport, the table gets truncated and is not fully visible. Additionally, there is no horizontal scroll available to view the entire content of the table. This results in important information being cut off, making it difficult to see the complete data.

Impact :

  • Incomplete visibility of data in tables.
  • Difficulty in accessing and reviewing all necessary information.
  • Potential miscommunication or loss of crucial data due to truncation.

Steps to reproduce the behavior:

Create a Ticket by sending an email to the ticketing system which includes a table of width larger than the viewport (table with more than 15 columns i.e typically large width).

Hi @shubham and thanks for filing your report. There is already a bug report for it: Tables (spreadsheets) in articles are cut off in Zammad UI · Issue #4960 · zammad/zammad · GitHub

Till the issue is resolved, you can do the following as a workaround:

  1. Create a custom CSS
  2. Add the following style in the CSS
div.richtext-content {
	overflow: scroll;
}

Checkout this article for instructions in adding a custom CSS:

https://medium.com/@ANotDevDev/how-to-add-custom-css-to-zammad-4cff81a9197e

1 Like