Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: max width of editor container on mobile #4337

Merged
merged 2 commits into from
Jun 22, 2023

Conversation

luka-nextcloud
Copy link
Contributor

@luka-nextcloud luka-nextcloud commented Jun 21, 2023

๐Ÿ“ Summary

๐Ÿ–ผ๏ธ Screenshots

๐Ÿš๏ธ Before ๐Ÿก After
image image

๐Ÿšง TODO

  • ...

๐Ÿ 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

@luka-nextcloud luka-nextcloud self-assigned this Jun 21, 2023
@cypress
Copy link

cypress bot commented Jun 21, 2023

1 failed and 2 flaky tests on run #10400 โ†—๏ธŽ

1 143 1 3 Flakiness 2

Details:

fix: max width of editor container on mobile
Project: Text Commit: 09b8dc16ae
Status: Failed Duration: 03:34 ๐Ÿ’ก
Started: Jun 22, 2023 7:18 AM Ended: Jun 22, 2023 7:22 AM
Failedย  cypress/e2e/viewer.spec.js โ€ข 1 failed test

View Output Video

Test Artifacts
Open test.md in viewer > See test.md in the list Output Screenshots
Flakinessย  sync.spec.js โ€ข 1 flaky test

View Output Video

Test Artifacts
Sync > recovers from a lost connection Output Screenshots
Flakinessย  api/UsersApi.spec.js โ€ข 1 flaky test

View Output Video

Test Artifacts
The user mention API > fetches users with valid session Output Screenshots

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

@@ -67,6 +67,12 @@ export default {
width: 100%;
}

@media (max-width: 670px) {
Copy link
Member

@juliusknorr juliusknorr Jun 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It wasn't immediately obvious to me that this is the value of --text-editor-max-width.

Maybe we can just set a max-width in the above general .editor_content rule like this to keep it simple?

.editor__content {
	max-width: min(var(--text-editor-max-width, calc(100vw - 16px));

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, please check again.

@juliusknorr juliusknorr added bug Something isn't working 2. developing mobile labels Jun 21, 2023
@juliusknorr juliusknorr added this to the Nextcloud 28 milestone Jun 21, 2023
@luka-nextcloud luka-nextcloud force-pushed the bugfix/editor-max-width-on-mobile branch 2 times, most recently from 51e8da3 to 51fd070 Compare June 21, 2023 18:33
@luka-nextcloud luka-nextcloud force-pushed the bugfix/editor-max-width-on-mobile branch from 51fd070 to 20fb69e Compare June 21, 2023 18:36
@juliusknorr
Copy link
Member

/compile

Signed-off-by: nextcloud-command <[email protected]>
@juliusknorr juliusknorr merged commit 9b000f3 into main Jun 22, 2023
@juliusknorr juliusknorr deleted the bugfix/editor-max-width-on-mobile branch June 22, 2023 07:35
@juliusknorr
Copy link
Member

/backport 8765b4f to stable27

@juliusknorr
Copy link
Member

/backport 8765b4f to stable26

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4. to release bug Something isn't working mobile
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Strange behaviour of background when direct editing on narrow screens
3 participants