Problem/Motivation
In Claro theme, in the webform results table, If a sortable column has a long title, then it overlaps with the sort icon.

This is caused because the text trucation logic is applied to the `th` element, but in case of sortable column the title is in a `th a` element
Steps to reproduce
- Create a Webform with long field names.
- Submit a couple of entries.
- Go to the Webform submission page.
Proposed resolution
- Add the same text truncation style on `th a` as there's on `th`
| Comment | File | Size | Author |
|---|---|---|---|
| #31 | after.png | 121.89 KB | dipakmdhrm |
| #31 | before.png | 121.44 KB | dipakmdhrm |
| #27 | Screenshot from 2024-04-17 00-36-26.png | 23.72 KB | sourojeetpaul |
| #24 | oliverodefaultview.png | 6.45 KB | sourojeetpaul |
| #24 | oliveroviewlong.png | 59.64 KB | sourojeetpaul |
Issue fork drupal-3441015
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Issue fork webform-3441015
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #6
dipakmdhrm commentedI had some trouble with issue forks so here's a patch and before and after shots:
Comment #7
dipakmdhrm commentedComment #8
dipakmdhrm commentedPatch with proper whitespaces
Comment #10
dipakmdhrm commentedComment #11
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue.
While you are making the above changes, we recommend that you convert this patch to a merge request. Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)
Comment #13
dipakmdhrm commentedComment #14
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #17
sourojeetpaul commentedComment #18
sourojeetpaul commentedHello there, Fixed the linting errors of the pipeline and hence the merge errors gets over now. So moving the ticket to "Needs Review" state.
https://git.drupalcode.org/project/drupal/-/merge_requests/7499#note_297751
Comment #19
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #22
sakthi_dev commentedAs the latest dev branch is 11.x, created a MR for that branch. Hope this will resolve the needs review bot issue.
Comment #23
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #24
sourojeetpaul commentedHi, After digging up quite a bit, I found that the issue of overlapping of the icon is not with Drupal Core Views or Claro theme, rather its purely an issue of the webform module. At first I only tried to reproduce the issue with webforms module as mentioned by @dipakmdhrm, and hadn't tested it by creating a view. Sorry for that!
The issue seems to be legit when we are looking at webform submission sortable title but doesn't persist in other cases i.e views sortable column or so, The sort toggle icon is appearing properly in Claro theme. But while looking for that I encountered that there is an issue with the sort icon on Olivero theme in case of normal views. For a two column table if we make both the columns sortable then the sort icon as well as the sorting feature becomes available to the later one only irrespective of the length of heading, it disappears from the first column.
I think the issue of Olivero theme can be addressed on another issue or I'm not sure yet if any issue already exist in the D.O issue queue, have to check that.
Pertaining to the sort icon overlapping issue, its still there on the latest version of the webform module. So I'm changing the issue metadata accordingly. If you derive any other findings feel free to change accordingly!
Also attaching screenshots for the reference of my findings.
Comment #26
sourojeetpaul commentedComment #27
sourojeetpaul commentedHi, I've finally resolved the sort icon overlap issue for long headings in webform results table and raised an MR for the same. Please have a look!

https://git.drupalcode.org/project/webform/-/merge_requests/459
This is how it looks now even with longer titles!
Comment #28
dipakmdhrm commented@sourojeetpaul Nice work finding out that this was a webform issue!
Also added a comment to MR.
From your comment and my original findings, I believe this issue is a webform issue, but at the moment limited to claro.
Olivero doesn't seem to be affected by this, but like you mentioned it has it's own issue with icons.
I'll update the issue to keep the scope limited to claro & webform. Feel free to update if you disagree or/and if you find more.
Again, nice work! My bad that I missed that this was a webform issue.
Comment #29
sourojeetpaul commentedHello, @dipakmdhrm
The changes suggested by you are valid, and I've also observed that the webform results table behaves differently on different theme, Like this icon overlapping issue is appearing on the claro theme and there is another issue on the results table on viewing it with Olivero theme.
So I agree that the changes should be in that specific file, and resolving it right away!
Comment #30
sourojeetpaul commentedHi, @depakmdhrm Resolved the issues suggested by you in my latest commit. Please have a look!
https://git.drupalcode.org/project/webform/-/merge_requests/459
Comment #31
dipakmdhrm commentedLatest MR fixes this. RTBC
Comment #32
jrockowitz commentedThe patch is against Drupal core. This ticket should be moved to Drupal core's issue queue.
Comment #35
sourojeetpaul commentedHi @jrockowitz,
I think you might got confused by the first two MRs. Those were raised against Drupal Core, but later as per my findings I changed the fork repo to that of webforms and created a MR for the same against the branch 6.2.x which I suppose is for the latest version of the module.
And @dipakmdhrm also confirmed my findings and tested the same.
If it was a Drupal Core issue it should affect all other table headers like that of Core's View, but that is not the case here. Rather its a Webform issue and how its interacting the Core's themes. As mentioned on my previous comment, its behaving differently with differnt themes of Core, as of this I limited the scope to its interaction with Claro theme, maybe we can target its interaction with other themes in another issue.
I think the confusion was created as those previous two MRs were still open. Sorry for that! I couldn't close them as I'm not the one who opened those MRs respectively.
Please refer to MR !459 https://git.drupalcode.org/project/webform/-/merge_requests/459 for this issue. It targets the issue related to Webform module and how it interacts with Core's claro theme.
Also I'm hiding the previous MRs to avoid further confusion and changing the issue metadata once again!
Comment #37
jrockowitz commentedComment #39
jrockowitz commented