Budibase/budibase

Mobile Button Layout Option for Full-Width Stretch

Open

#16.888 geöffnet am 3. Sept. 2025

Auf GitHub ansehen
 (2 Kommentare) (1 Reaktion) (0 zugewiesene Personen)TypeScript (19.820 Stars) (1.304 Forks)batch import
bb-designconditional uienhancementgood first issuelow-hanging-fruit

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
half day
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Budibase UI basicsResponsive CSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70
Research-Richtung
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.