search

thepensionsregulator / govuk-frontend-aspnetcore-extensions

Adds client-side validation, additional components and editing in Umbraco to https://github.com/gunndabad/govuk-frontend-aspnetcore
MIT License
16 stars 1 forks source link

200457: Fix button height #322

Closed KomalPolavarapu-tpr closed 2 months ago

KomalPolavarapu-tpr commented 2 months ago

320 Fix button height

sussexrick commented 2 months ago

@KomalPolavarapu-tpr I've updated the PR because in order to check your work I needed to change the settings, so there didn't seem much point in me telling you how to change the same settings again.

Setting height: 50px would've broken the scenario where the text of a button wraps:

With height set: Text is cut off

Without height set: Text wraps correctly

Instead I've altered the line height so that the height of a button adds up to 50px. That's 1px top border, 8px top padding, 33px line height, 7px bottom padding and 1px bottom border. Yours added up to 48px.

KomalPolavarapu-tpr commented 2 months ago

@KomalPolavarapu-tpr I've updated the PR because in order to check your work I needed to change the settings, so there didn't seem much point in me telling you how to change the same settings again.

Setting height: 50px would've broken the scenario where the text of a button wraps:

With height set: Text is cut off

Without height set: Text wraps correctly

Instead I've altered the line height so that the height of a button adds up to 50px. That's 1px top border, 8px top padding, 33px line height, 7px bottom padding and 1px bottom border. Yours added up to 48px.

Oh ok. I wasn't aware of multi line button I was only referring here for different kind of buttons. But adjusting line-height also seems to be working image

KomalPolavarapu-tpr commented 2 months ago

@sussexrick Do you know who can approve this PR?