make MkAbuseReport more friendly for smaller screen sizes

What does this PR do? (Please give us a brief description of what this PR does.) Currently, Sharkey inherits the design of Misskey's report element. On smaller screen sizes, it doesn't look great. This improves the current look by making the side section of the user being reported go on the top of the report and adds spacing between the resolve button and forward switch.

New:

Previous:

Contribution Guidelines By submitting this merge request, you agree to follow our Contribution Guidelines

• I agree to follow this project's Contribution Guidelines
• I have made sure to test this pull request

changed the description

thank you! I like your design!

given that this component is pretty small, and you've essentially rewritten half of it, I feel it would be more future-friendly if instead we had our own SkAbuseReport.vue with your code in it… opinions?

added 1 commit

• 5ef58c90 - replace brs with margin in MkAbuseReport

Compare with previous version

Nice work with this!

resolved all threads

approved this merge request

approved this merge request

approved this merge request

There's a lint error:

/builds/blueb/Sharkey/packages/frontend/src/components/MkAbuseReport.vue
  37:26  error  Attribute "v-if" should go before "class"  vue/attributes-order
✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

added 1 commit

• 04c729e5 - fix: lint error in MkAbuseReport

Compare with previous version

reset approvals from @Marie, @dakkar, and @fEmber by pushing to the branch

approved this merge request

approved this merge request

resolved all threads

merged

mentioned in commit bc8c6592

(Bit off-topic) MkAbuseReport and related backend things are currently being enhanced upstream. See https://github.com/misskey-dev/misskey/pull/14704