POLIO-1536, POLIO-1539, POLIO-1547, POLIO-1549: budget process layout improvements

[quang-le]

small layout improvements

Related JIRA tickets : POLIO-1536, POLIO-1547, POLIO-1549, POLIO-1539

Self proofreading checklist

• [x] Did I use eslint and black formatters
• [x] Is my code clear enough and well documented
• [x] Are my typescript files well typed
• [ ] New translations have been added or updated if new strings have been introduced in the frontend
• [ ] My migrations file are included
• [ ] Are there enough tests
• [ ] Documentation has been included (for new feature)

Doc

None

Changes

• BudgetCard:
  • Adapt redirection url
  • Add edit button
  • Adapt modal layout for xs screens
  • Improve buttons layout
• Improve TextArea's handling of focus so cursor is visible on first click
• Add margin top so Comments label is visible in CreateBudgetStep modal
• Improve buttons layout on mobile layout
• Re-order dropdown input in CreateBudgetProcess modal
• Fix deep-linking in BudgetDetailsFilters
• Toggle "show hidden" when user click "filter" button, to align behaviour with other filters in iaso, eg: forms

How to test

• Go to Budgets
• Switch to mobile view in the browser
• Budget cards should have both see and edit buttons
• "Plan a new Budget process" button should be better aligned
• click "plan new budget process" button: campaign input should come before round input
• Go to the details of a process
• Try adding a step (regular, not override)
• Click in the "comments". text area: the input label should shrink and the cursor be visible within the text area
• Try hiding a line in the process table: the url should be updated and the deep link should work

Print screen / video

https://github.com/BLSQ/iaso/assets/38907762/15766bed-cbca-4e14-a016-0d34f3c4b240