fix: table overflow when long filename

[lassopicasso]

Description

The table that is in use in SigningDocumentListComponent would overflow the document when the filename is too long. This PR handle this in two parts:

• adds fixed table-layout css to the table so that it doesn't overflow the document.
• adds overflow hidden and text-overflow ellipsis on the file name. While the extension (if it has one) will also be displayed. Now it has consistent behaviour as in the table for filenames in the file upload component.

Also added title prop to the Link, so that hover the name, user can still read the full name while overflow.

Related Issue(s)

• closes Long filename-texts exceed the component "SigningDocumentList" #3685

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* and backport* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

Summary by CodeRabbit

• Style & UI Improvements
  • Enhanced table layout styling and text truncation for improved readability in lists.
  • Improved filename display with visual separation between name and file extension.
  • Added tooltip showing full filename on hover for truncated entries.

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes add four CSS classes for table layout and text truncation to SigneeListComponent, and modify SigningDocumentList to split filenames into name and extension parts with improved styling and accessibility attributes.

Changes

Cohort / File(s)	Summary
CSS Styling Updates src/layout/SigneeList/SigneeListComponent.module.css	Added four new CSS classes: table (fixed layout), nameWrapper (flex layout), truncate (text overflow with ellipsis), and extension (prevent shrink, single line).
Component Filename Display src/layout/SigningDocumentList/SigningDocumentListComponent.tsx	Imported getFileEnding and removeFileEnding utilities. Modified Link to include full filename as title attribute. Restructured filename rendering into wrapper with separate spans for name and extension parts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: table overflow when long filename' directly addresses the main issue: preventing table overflow from long filenames, which is the core objective of this PR.
Description check	✅ Passed	The description includes all key required sections: a clear explanation of the problem and solution, links to related issue #3685, and manual testing verification with a visual demonstration.
Linked Issues check	✅ Passed	The PR successfully addresses issue #3685 by implementing fixed table-layout CSS, adding text-overflow ellipsis styling for filenames, and displaying file extensions separately with a title attribute for full filename visibility on hover.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the table overflow issue: CSS classes for table layout and text truncation in SigneeListComponent.module.css, and filename display modifications in SigningDocumentListComponent.tsx align with issue #3685 requirements.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-signingdocumentlist-table-overflow-when-long-filename

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/layout/SigningDocumentList/SigningDocumentListComponent.tsx (1)

12-12: SigningDocumentList relies on CSS classes defined in SigneeList's module.

The new classes (table, nameWrapper, truncate, extension) are added to SigneeListComponent.module.css but are consumed here by SigningDocumentListComponent. This couples two independent layout components through shared styling. Consider extracting the shared CSS into a dedicated shared module (e.g., SigningDocumentListComponent.module.css or a common utility CSS module) so each layout component owns or explicitly shares its styles.

As per coding guidelines, "Layout components must have a standardized structure" and "Use CSS Modules for component styling following existing patterns in *.module.css files."

#!/bin/bash
# Check if SigningDocumentList already has its own module.css
fd 'SigningDocumentList' --type f --extension css

# Check which classes from SigneeListComponent.module.css are used in SigningDocumentListComponent
rg -n 'classes\.' src/layout/SigningDocumentList/SigningDocumentListComponent.tsx

# Check which classes from SigneeListComponent.module.css are used in SigneeList's own component
rg -n 'classes\.' src/layout/SigneeList/SigneeListComponent.tsx

src/layout/SigneeList/SigneeListComponent.module.css (1)

7-9: With table-layout: fixed and no explicit column widths, columns distribute equally.

This means the filename, attachment type, size, and download columns will each get ~25% width. The filename column likely benefits from more space than the size column. Consider setting explicit widths on specific columns (e.g., via nth-child selectors or column width attributes) to better allocate space.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[JamalAlabdullah]

Works fine!

[github-actions]

✅ Automatic backport successful!

A backport PR has been automatically created for the release/v4.25 release branch.

The release branch release/v4.25 already existed and was updated.

The cherry-pick was clean with no conflicts. Please review the backport PR when it appears.