[FIX] topbar: fix readonly banner on mobile

[fw-bot]

Description

When the spreadsheet is in readonly mode, the readonly banner wasn't taking the full width of the topbar.

Task: 5342571

review checklist

• feature is organized in plugin, or UI components
• support of duplicate sheet (deep copy)
• in model/core: ranges are Range object, and can be adapted (adaptRanges)
• in model/UI: ranges are strings (to show the user)
• undo-able commands (uses this.history.update)
• multiuser-able commands (has inverse commands and transformations where needed)
• new/updated/removed commands are documented
• exportable in excel
• translations (_t("qmsdf %s", abc))
• unit tested
• clean commented code
• track breaking changes
• doc is rebuild (npm run doc)
• status is correct in Odoo

Forward-Port-Of: #7723

[robodoo]

[fw-bot]

@hokolomopo @pro-odoo cherrypicking of pull request #7723 failed.

stdout:

Auto-merging src/components/top_bar/top_bar.xml
Auto-merging tests/__snapshots__/top_bar_component.test.ts.snap
CONFLICT (content): Merge conflict in tests/__snapshots__/top_bar_component.test.ts.snap
Auto-merging tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap

Either perform the forward-port manually (and push to this branch, proceeding as usual) or close this PR (maybe?).

In the former case, you may want to edit this PR message as well.

⚠️ after resolving this conflict, you will need to merge it via @robodoo.

More info at https://github.com/odoo/odoo/wiki/Mergebot#forward-port

[hokolomopo]

@robodoo r+