Mobile viewport topbar logo

[kulmann]

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

As a mobile browser user, I want logo and icons not to overflow in the topbar so that the design looks nice.

User Value

Clean UI

Screenshot of the "issue"

Acceptance Criteria

• web can have different logos on mobile and non-mobile viewports respectively
• logos for different viewport sizes are defined by the theme
• it must still be possible to only define ONE logo file for all viewports
• in the default theme, a mobile viewport uses the hexagon-part of the logo without the OpenCloud name (must be a different svg file).

Technical note: this can be solved via the html picture element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture