fix: add close button when open readonly files on mobile app

[luka-nextcloud]

📝 Summary

• Resolves: Close button does not show when opening readonly .txt or .md files in iOS and Android Nextcloud app #7580

Add close button when open read-only files on mobile app

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.54%. Comparing base (ea23129) to head (9526394).
⚠️ Report is 22 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7624   +/-   ##
=======================================
  Coverage   59.54%   59.54%           
=======================================
  Files         310      310           
  Lines       38748    38754    +6     
  Branches      937      937           
=======================================
+ Hits        23072    23078    +6     
  Misses      15568    15568           
  Partials      108      108           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mejo-]

Thanks for tackling this! I didn't test yet, just reviewed the code changes.

[mejo-]

I just now took a deeper look. I think there's no need to add the button to the Editor.vue component manually. Instead, you should make sure that the #header template from DirectEditing.vue is added to the <ReadOnlyBar> element in Editor.vue just like it's done for <MenuBar>.

While testing this, I realized that the ReadOnlyBar doesn't display well on mobile (at the bottom), it's cut off and the border line is on the wrong side. If you could take a look into improving this and harmonizing it with how MenuBar is displayed on mobile, that would be awesome. If not we can also do it in a follow-up PR. (already tackled in #7560)

[max-nextcloud]

#7560 seems related.

[mejo-]

#7560 seems related.

Ah wow, I missed that. It seems to address my second comment from above 🙏 Will take a look.

[mejo-]

While testing this, I realized that the ReadOnlyBar doesn't display well on mobile (at the bottom), it's cut off and the border line is on the wrong side. If you could take a look into improving this and harmonizing it with how MenuBar is displayed on mobile, that would be awesome. If not we can also do it in a follow-up PR.

So this is no longer necessary as it got tackled in #7560 already 🙏

[mejo-]

/backport to stable32

[mejo-]

/backport to stable30

[mejo-]

/backport to stable31