Budibase/budibase

Mobile Button Layout Option for Full-Width Stretch

Open

#16.888 aberto em 3 de set. de 2025

Ver no 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:

Guia do colaborador

Pilha de tecnologia
typescriptreact
Domain
frontendaccessibility
Tipo Issue
feature
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
half day
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
fresh
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Budibase UI basicsResponsive CSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70
Direção de pesquisa
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.