Budibase/budibase

Mobile Button Layout Option for Full-Width Stretch

Open

#16888 opened on Sep 3, 2025

View on GitHub
 (2 comments) (1 reaction) (0 assignees)TypeScript (19,820 stars) (1,304 forks)batch import
bb-designconditional uienhancementgood first issuelow-hanging-fruit

Description

Description:

When using Budibase on mobile devices—especially in modals or stacked layouts—buttons often default to fit-content or nowrap, resulting in cramped or uneven alignment. This impacts usability and visual consistency, particularly when multiple action buttons (e.g., Save, Delete, Close) are presented together.

Proposed Enhancement:

Introduce a layout option or style toggle in the builder UI that allows buttons to stretch to width: 100% of their parent container in mobile view. This could be a responsive setting or a per-button style override. This allows those buttons to display stacked on top of one another and from screen end to end.

Why It Matters:

• Improves tap targets and accessibility on smaller screens • Enhances visual consistency in modal and form layouts • Reduces reliance on manual CSS overrides or custom components • Aligns with mobile-first design principles

Screenshot:

Contributor guide

Tech stack
typescriptreact
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Budibase UI basicsResponsive CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the existing button component in Budibase's frontend (likely in packages/frontend components) and review the issue comments for design guidance. Propose adding a responsive style toggle or CSS class that sets width: 100% on mobile breakpoints, ensuring consistency with the builder's existing responsive utilities.