LF-4738 Delete Task" Button Misalignment in Custom Task Screen

[den4ik1203]

Description

This update fixes a bug that was causing [briefly describe the issue, e.g., "the delete button to be misaligned in the footer section"].

Changes Made:
Adjusted the CSS layout to properly align the delete button to the left.
Updated the flexbox properties in .footerContainer to ensure correct spacing.
Refactored the JSX structure for better readability and maintainability.
Reason for the Fix:
The delete button was not aligning as expected due to incorrect justify-content and margin rules. This fix ensures a consistent UI layout.

Jira link:
https://lite-farm.atlassian.net/browse/LF-4738
Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[SayakaOno]

Could you remove invisible div and buttons?
These changes affect other task types, so it would be best to focus on fixing just what’s broken.

[Duncan-Brain]

Hi @den4ik1203 thanks for working on this!

I think Sayaka is right you have added extra buttons, these should be removed.

At least for me I am seeing that the fix is not correct for custom tasks with no location specified it just moves closer than before:

Some things to think about:

• It seems like the map fills up available space and pushes the delete button down in most cases you can see this as i delete normal task inputs in video
• If we want to make sure the delete icon is with buttons, have you considered grouping the delete button with form buttons?
• there is a lot of css there - do you need them all? Ideally as little css as possible is added (I think your instinct is right about min-height and it should not be used):

Screen.Recording.2025-02-21.at.10.06.27.AM.mov

[Duncan-Brain]

Hey @den4ik1203 it is looking closer to what I might expect!

Two things:

1. I am seeing th mobile buttons seem to have changed:
   
   

2. We want to make sure that the delete button renders according to previous conditions only, and the other buttons render according to previous conditions only. And it is also nice that we do not duplicate conditions if there are shared.

In the code for the delete buttons the previous condition for rendering was:

isAdmin && isCurrent && !isDeleting -> render delete button

In the previous code the condition for rendering the bottom buttons was:

canCompleteTask || canAbandonTask) && isCurrent -> render buttons

The new code and condition for rendering delete button is:
canCompleteTask || canAbandonTask) && isCurrent .... && isAdmin && isCurrent && !isDeleting -> render delete button

It might be okay but it is good to double check if there are cases where it is not rendering when it should because of extra conditions.