fix(frontend): createbuttonmobile fix

[Bettelstab]

🍰 Pullrequest

The button is now fully visible, and a bit smaller, when it's open and the list is shown. Also adds a story, and fixes the one for BottomMenu (which was kind of broken because of this button, as the button wouldn't work because of the missing teleport target).

Before:

After:

Issues

• fixes part of 🚀 [Feature] Frontend: Optimize Menu #1173

Suggestion for future work:

• I think the component is quite big and could be split into smaller ones, like one for the button ifself, one for the list, one for the wrapper
• Having a teleport target inside the Vue component tree seems to be not ideal, could be solved in a different way
• Better use Vuetify breakpoints instead of defining new ones

Todo

• Button should be smaller when open

[Bettelstab]

I think the failing tests are not related to this PR, but because of #1189

[roschaefer]

Alright I will also click on "Request changes" here. The biggest issue is that I don't see any difference except the circular border has changed a little. What do you mean with "The button is now fully visible"?

The biggest problem I have with this component is that it doesn't even look like a button for me.

[Bettelstab]

Please have a look at the animations before and after the change. This is the main point of this PR. You could argue the stories are out of scope, I think there are nice to include because they demonstrate the change.

All further discussions can be lead, but imo they are out of scope for this PR.

[Bettelstab]

PS: I added screenshots to clarify what the intended changes are.

[roschaefer]

If the only target of this PR was the animation, I can of course hit "approve" here. Nevertheless, I'd like to pair-program with someone in the frontend about the remaining issues.

Thanks for clarification! I also hit "request changes" if I don't understand a PR entirely. I saw the changes in the animation but didn't think it was the scope of the PR.

[Bettelstab]

@roschaefer Thank you for all your feedback, it also reminds me to give more detailed information of what is a PR about.
I suggest you do a pair programming with @maeckes1 when he is back, otherwise I would also be open to do that with you.