[WEB-8510] fix(web): fix clipped/overlapping LayoutDropDown button in Create View modal

[codingwolf-at]

Description

LayoutDropDown (used for the layout selector in the "Create/Update View" modal) was styled with getIconButtonStyling, which is built for icon-only buttons — it forces a fixed square shape (aspect-square + a fixed size-7). Since this dropdown's button renders an icon and a text label ("List", "Board", etc.), the label got clipped (e.g. "List" rendered as "Lis") and the button visually overlapped the adjacent "Display" button.

Fix: use getButtonStyling instead — the same helper already used by comparable text+icon dropdown triggers elsewhere in the codebase (e.g. ProjectOrderByDropdown), which gives a fixed height with auto width instead of a forced square.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Before: "List" label clipped to "Lis", overlapping the "Display" button.

After: button renders at full width with the complete "List" label and proper spacing.

Test Scenarios

Reproduced and verified in a local dev instance:

1. Opened Project → Views → "Add view" to bring up the "Create View" modal.
2. Confirmed the layout dropdown button previously clipped its label and overlapped the neighboring "Display" button.
3. Applied the fix and re-opened the modal — button now renders at correct width with the full "List" label, no overlap.

References

WEB-8510

[coderabbitai]

📝 Walkthrough

Walkthrough

The dropdown layout replaces icon-button styling with the standard secondary large button styling utility.

Changes

Dropdown styling

Layer / File(s)	Summary
Apply standard dropdown button styling apps/web/core/components/dropdowns/layout.tsx	The dropdown imports getButtonStyling and applies getButtonStyling("secondary", "lg") to the button container.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: sriramveeraghanta

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Title check	✅ Passed	The title clearly identifies the layout dropdown button fix and the affected Create View modal.
Description check	✅ Passed	The description explains the cause and fix, marks the bug-fix type, includes screenshots, test scenarios, and a reference.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch WEB-8510/view-fixes-safari

---

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

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 8026a7c.}

[makeplane]

Linked to Plane Work Item(s)

• (WEB-8510) UI break in View filter section and Date , filter box on Pages (Safari only)”

This comment was auto-generated by Plane