[BUG]: Inconsistency on Explore Page for Specific Search Queries

[JiyaGupta-cs]

Description

There is an overflow issue on the Explore page when searching for specific queries. For example:

• Searching for feminism at this URL causes an overflow error.
• However, searching for feminism+e at this URL does not cause the same issue, despite being the same page with the same components.

This inconsistency suggests a potential bug in the structure of the table.

Steps to reproduce the behavior:

1. Go to Programs & Events Dashboard
2. Perform a search for feminism.
3. Observe the overflow issue.
4. Perform a search for feminism+e and note that the issue does not occur.

Expected behavior:

Both queries should render the Explore page consistently without any overflow issues.

Screenshots:

System Information

• OS: Ubuntu
• Browser: Chrome, Firefox

[RashiJyotishi]

@JiyaGupta-cs I would like to work on this issue, would you please assign it to me

[ragesoss]

@RashiJyotishi we do not assign issues, but you are welcome to work on it.

[vishwajeet1729]

Issue Identified:

1. While investigating the issue, I found that when a single word is too long, it doesn’t wrap inside the table cell.
2. For example, if the word is "abbb", it stays on one line instead of breaking onto the next.
3. Ideally, long words should wrap onto the next line, but they currently do not break properly.

Solution Implemented:

1. Added CSS styling to all <td> elements with the .table-link-cell class to ensure word wrapping.
2. The applied styles are:

   .table-link-cell {
             max_width:200px;
             hyphens: auto;     
             overflow-wrap:break-word
   }

File Modified:

• Path: WikiEduDashboard\app\assets\stylesheets\modules\_tables.styl

@ragesoss @JiyaGupta-cs will do PR shortly 👍