How to increase the size of input and button - sapui5

Question

I have a simple form, that looks as follows:
On the large screen, it looks pretty small. I would like to increase the size and width.
This is the code:
<Page title="{i18n>authorization}">
<content>
<VBox alignItems="Center">
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
Update
I have removed simple form and placed the controls in VBOX.
<Page title="{i18n>authorization}">
<content>
<VBox alignItems="Center">
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</VBox>
</content>
</Page>
The controls still looks very small:
How can I increase the size of controls?

Answer 1

The properties labelSpan<ScreenSize> and emptySpan<ScreenSize> are the one which control the width of the actual elements within a "row" of the form.
More info here: https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.form.SimpleForm
For example, for M you have label span of 3 and empty span of 3 => leaving 6 out of total 12 for the actual elements. Try reducing labelSpanM and emptySpanM to increase the width taken by the element Text, Button and Input
That being said, I don't think the choice of simple Form was a wise choice here - why don't you put the three elements directly into the VBox?
That also being said, in case you are implementing an authentication screen inside an application, you should rethink this and let authentication layers take care of that (wherever your app is running)
Update after Question update: depending on what you want to achieve, you could simply add a css class to the control and add some css. that is the "manual" way. you could add a custom theme and style the buttons there. you could add custom extensions of the standard controls, e.g. a custom button as extension of standard button. and completely change the rendering there. I think, this are more or less the possibilities