Skip to content

fix: max width of editor container on mobile - #4337

Merged
juliusknorr merged 2 commits into
mainfrom
bugfix/editor-max-width-on-mobile
Jun 22, 2023
Merged

fix: max width of editor container on mobile#4337
juliusknorr merged 2 commits into
mainfrom
bugfix/editor-max-width-on-mobile

Conversation

@luka-nextcloud

@luka-nextcloudluka-nextcloud commented Jun 21, 2023

Copy link
Copy Markdown
Contributor

📝 Summary

🖼️ Screenshots

🏚️ Before🏡 After
imageimage

🚧 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-nextcloudluka-nextcloud self-assigned this Jun 21, 2023
@cypress

cypressBot commented Jun 21, 2023

Copy link
Copy Markdown

1 failed and 2 flaky tests on run #10400 ↗︎

114313Flakiness2

Details:

fix: max width of editor container on mobile
Project: TextCommit:09b8dc16ae
Status: FailedDuration: 03:34 💡
Started: Jun 22, 2023 7:18 AMEnded: Jun 22, 2023 7:22 AM
Failed cypress/e2e/viewer.spec.js • 1 failed test

ViewOutputVideo

Test Artifacts
Open test.md in viewer > See test.md in the list OutputScreenshots
Flakiness sync.spec.js • 1 flaky test

ViewOutputVideo

Test Artifacts
Sync > recovers from a lost connection OutputScreenshots
Flakiness api/UsersApi.spec.js • 1 flaky test

ViewOutputVideo

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

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

width: 100%;
}

@media (max-width: 670px) {

@juliusknorrjuliusknorrJun 21, 2023

Copy link
Copy Markdown
Member

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
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Ok, please check again.

@juliusknorrjuliusknorr added bug Something isn't working 2. developing mobile labels Jun 21, 2023
@juliusknorrjuliusknorr added this to the Nextcloud 28 milestone Jun 21, 2023
@luka-nextcloud
luka-nextcloudforce-pushed the bugfix/editor-max-width-on-mobile branch 2 times, most recently from 51e8da3 to 51fd070CompareJune 21, 2023 18:33
@luka-nextcloud
luka-nextcloudforce-pushed the bugfix/editor-max-width-on-mobile branch from 51fd070 to 20fb69eCompareJune 21, 2023 18:36
Signed-off-by: Luka Trovic <luka@nextcloud.com>
@juliusknorr
juliusknorrforce-pushed the bugfix/editor-max-width-on-mobile branch from 20fb69e to 8765b4fCompareJune 22, 2023 06:39
@juliusknorr

Copy link
Copy Markdown
Member

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@juliusknorr
juliusknorr merged commit 9b000f3 into mainJun 22, 2023
@juliusknorr
juliusknorr deleted the bugfix/editor-max-width-on-mobile branch June 22, 2023 07:35
@juliusknorr

Copy link
Copy Markdown
Member

/backport 8765b4f to stable27

@juliusknorr

Copy link
Copy Markdown
Member

/backport 8765b4f to stable26

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

4. to releasebugSomething isn't workingmobile

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

@luka-nextcloud@juliusknorr@nextcloud-command