feat: added new property buttonLayout for vertical layout for edit/delet buttons

[JamalAlabdullah]

Description

This PR adds a new optional edit.buttonLayout property to RepeatingGroup so table row buttons can be arranged either horizontally (default) or vertically.
When set to "vertical", edit and delete buttons are rendered in a single column, which saves horizontal space in tables.

What changed

• Added buttonLayout to RepeatingGroup edit config:
  - Allowed values: "horizontal" | "vertical" - Default: "horizontal"
• Updated table header/body rendering to support:
  - two columns in horizontal mode
  - one combined action column in vertical mode
• Added tests for vertical action-column behavior and compact-buttons combination.
• Added docs

Related Issue(s)

• closes Repeterende gruppe: Rediger-knappen tar veldig mye plass på tabeller med editInTable: true. #4125

• doce PR

Screen.Recording.2026-05-07.at.10.29.43.mov

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

• New Features

  • Repeating group tables now support a vertical button layout option for edit/delete controls
  • Edit and delete buttons can be arranged vertically instead of horizontally in desktop table views
  • Compatible with compact buttons mode for icon-only displays

• Tests

  • Added test coverage for vertical button layout scenarios, including compact button configurations

[coderabbitai]

Warning

Rate limit exceeded

@JamalAlabdullah has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 29 minutes and 40 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c8e30153-e952-42e4-9704-8e0b87528df4

📥 Commits

Reviewing files that changed from the base of the PR and between 3baba4b and ce8c42a.

📒 Files selected for processing (1)

• src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx

📝 Walkthrough

Walkthrough

The PR adds support for vertical button layout in repeating group tables by introducing a new edit.buttonLayout configuration option. Changes propagate through the component hierarchy, adjusting column computation, header structure, and action cell rendering based on the layout mode, with updated icon visibility logic and comprehensive test coverage.

Changes

Vertical Button Layout for Repeating Group Tables

Layer / File(s)	Summary
Configuration Schema src/layout/RepeatingGroup/config.ts	Adds buttonLayout enum property (horizontal | vertical) with default horizontal to control action button arrangement in desktop table views.
Component Props Contract src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx	Extends IRepeatingGroupTableRowProps with new useVerticalButtonLayout: boolean property and destructures it in component parameters.
Layout & Column Computation src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx	Derives useVerticalButtonLayout from config and computes columnCount to size extra header/table cells appropriately for vertical vs. horizontal layout.
Header & Colspan Rendering src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx	Updates header cell structure to render single merged cell with visually hidden labels in vertical mode; refactors edit-container colspan calculation to use columnCount.
Action Cell Rendering src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx	Conditionally renders edit/delete action cells: vertical mode wraps controls in shared structure with optional spacer cell; horizontal mode preserves original separate-cell layout.
Button Icon Visibility src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx	Updates EditElement to show icon when button is not expanded and either compactButtons is enabled or mobileViewSmall is true.
Tests src/layout/RepeatingGroup/Table/RepeatingGroupTable.test.tsx	Adds buttonLayout test suite validating column/header count for vertical layout and icon-only button behavior with combined compactButtons setting.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a new buttonLayout property for vertical arrangement of edit/delete buttons in RepeatingGroup tables.
Description check	✅ Passed	The description covers key sections including what changed, related issues, and references documentation. However, the QA/Verification checklist is largely unchecked without clear selections on testing performed.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 4125-repeterende-gruppe-rediger-knappen-tar-veldig-mye-plass-på-tabeller-med-editintable-true

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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.}

[walldenfilippa]

Good job! I noticed that the buttons weren’t fully aligned, so I made a suggestion on how to fix it 🙂

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx`:
- Around line 151-161: The header cell currently always renders visually hidden
labels for both edit and delete which misleads screen readers; in
RepeatingGroupTable (look for useVerticalButtonLayout, columnCount,
displayEditColumn, displayDeleteColumn and utilClasses.visuallyHidden) change
the JSX so each visually-hidden <Lang id='general.edit'/> and <Lang
id='general.delete'/> is conditionally rendered only when its corresponding flag
(displayEditColumn or displayDeleteColumn) is true, leaving the surrounding
Table.HeaderCell rendering logic unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 811377f7-f9c2-4635-a530-5ae16f3d1d01

📥 Commits

Reviewing files that changed from the base of the PR and between bce9f48 and 3baba4b.

📒 Files selected for processing (4)

• src/layout/RepeatingGroup/Table/RepeatingGroupTable.test.tsx
• src/layout/RepeatingGroup/Table/RepeatingGroupTable.tsx
• src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
• src/layout/RepeatingGroup/config.ts

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[walldenfilippa]

Looks good! 🥳
I noticed that -webkit-baseline-middle does not work perfectly with all browsers in RepeatingGroup.module.css.
Eg. edge:

By changing vertical-align: -webkit-baseline-middle; to vertical-align: middle in RepeatingGroup.module.css the component values are placed in the middle in all browsers.
**Edge:

FireFox:

Crome:**

This is outside of this scope, but since it is a small fix, maybe we can include it here? What do you think?

[JamalAlabdullah]

Looks good! 🥳 I noticed that -webkit-baseline-middle does not work perfectly with all browsers in RepeatingGroup.module.css. Eg. edge:

By changing vertical-align: -webkit-baseline-middle; to vertical-align: middle in RepeatingGroup.module.css the component values are placed in the middle in all browsers. **Edge:

FireFox:

Crome:**

This is outside of this scope, but since it is a small fix, maybe we can include it here? What do you think?

vertical-align: -webkit-baseline-middle

I tried it but this will present agin an old bug we fixed , which is to align all input fields at same line when we have any error validation message

[walldenfilippa]

I tried it but this will present agin an old bug we fixed , which is to align all input fields at same line when we have any error validation message

Ah, good catch!

[github-actions]

✅ Automatic backport successful!

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

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

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