Fix the small padding issue

[Rithvik-padma]

Describe the changes you have made in this PR

fix the small padding issue for confirm/cancel buttons in the LNURL pay screen when the "more options" button is clicked

Link this PR to an issue [optional]

Fixes #2788

Type of change

• fix: Bug fix (non-breaking change which fixes an issue)

Screenshots of the changes [optional]

How has this been tested?

Tested manually

Checklist

• Self-review of changed code
• Manual testing
• Responsive layout

[Rithvik-padma]

@rolznz can u please review this PR.
Thanks!

[pavanjoshi914]

this will always break in the future for other screens where we use show more button. better to make a permanent fix here!

the problem here is when we expand fields, the bottom padding present in container field is not reflecting.

an alternate to fix this would be to assign bottom paddings to the last button div itself and not in the container.tsx (https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/components/Container.tsx#L32 notice pb-4 here) so that this will not be issue for every screen which has expnading fields

but this will lead to changes in other files where the container component is used.

wdyt @rolznz

[Rithvik-padma]

this will always break in the future for other screens where we use show more button. better to make a permanent fix here!

the problem here is when we expand fields, the bottom padding present in container field is not reflecting.

an alternate to fix this would be to assign bottom paddings to the last button div itself and not in the container.tsx (https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/components/Container.tsx#L32 notice pb-4 here) but this will lead to changes in other files where the container component is used.

wdyt @rolznz

Yes I agree, some change has to be made in Container component for a permanent fix or change the button padding everywhere Container component is used

[rolznz]

@pavanjoshi914 @Rithvik-padma I noticed in the Container component there is a h-full class which is problematic if the height of the component becomes larger than the height of the popup because the bottom will be cut off (here you see the padding, but it's actually worse than that). It seems to fix it if this is changed to min-h-full without any need to change padding elsewhere and I can't see any side effects. Does this look good to you? CC @reneaaron

[Rithvik-padma]

@pavanjoshi914 @Rithvik-padma I noticed in the Container component there is a h-full class which is problematic if the height of the component becomes larger than the height of the popup because the bottom will be cut off (here you see the padding, but it's actually worse than that). It seems to fix it if this is changed to min-h-full without any need to change padding elsewhere and I can't see any side effects. Does this look good to you? CC @reneaaron

@rolznz I have already tried doing that but the alignment of the child components is getting disturbed in the this screen and its possible to happen in other screens where Container component is being used as the alignment is done considering the h-full class in the Container component. The LNURL pay screen looks like this if min-h-full instead of the h-full.

[rolznz]

@Rithvik-padma can you highlight the issue in the screenshot? is it the extra spacing before the description? if you inspect it, now the css rules (like justify-between) on the container are correctly being applied and you can see the first element is just the publisher card.

I think the fix I suggested is now revealing an existing issue. If we don't want spacing there, we should not be using justifyBetween to add space between the publisher card and the form

[Rithvik-padma]

@Rithvik-padma can you highlight the issue in the screenshot? is it the extra spacing before the description? if you inspect it, now the css rules (like justify-between) on the container are correctly being applied and you can see the first element is just the publisher card.

I think the fix I suggested is now revealing an existing issue. If we don't want spacing there, we should not be using justifyBetween to add space between the publisher card and the form

@rolznz So I just found out that the possible reason for this issue is the fieldset element, it is not aligning as expected for flex, I have tried using the div tag instead of it and it works fine by considering min-h-full class in Container component.

So ig this means that there is no breaking if we use the min-h-full class in the Container component but the problem is with the fieldset tag.

I will make some changes for this issue by replacing the fieldset tag, can you please take a look into it.

[rolznz]

@Rithvik-padma the send page looks good to me. The close button on the success page is a bit broken - could you please check that one?

[Rithvik-padma]

@Rithvik-padma the send page looks good to me. The close button on the success page is a bit broken - could you please check that one?

Sure!

[Rithvik-padma]

@rolnz how can I test the success page while using a LND test account

[Rithvik-padma]

@rolznz I have fixed the padding issue in the result page, apparently min-h-full class was causing an issue there.

[rolznz]

tACK

[rolznz]

Thanks @Rithvik-padma !