text icon indicating copy to clipboard operation
text copied to clipboard

Publicly shared .md files: Outline has no background on mobile

Open Turbulentarius opened this issue 1 year ago • 2 comments

Describe the bug Outline has no background, which results in unreadable overlapping text on mobile for .md notes that are shared publicly. The links in the document outline simply overlaps the text in the .md file.

To Reproduce Steps to reproduce the behavior:

  • Open any shared note externally on mobile.
  • Open any shared note on a browser and resize the window

Expected behavior I assume the text should have a background, and at least some basic styling to make it look "not broken".

The following is a quick and dirty fix I applied in a custom app, because even the use of white space was quite ugly:

.editor-media-handler .text-editor--readonly-bar .text-readonly-bar {
  background-color: var(--color-main-background);
  padding:0.5rem 0;
}
.text-editor__content-wrapper .text-editor__content-wrapper__left .editor--outline {
  min-width: 300px;
  width: auto; /* This is still not enough to show whole text lines */
  margin:0 auto;
  background-color: var(--color-main-background);
  padding: 0;
  margin: 0 0.5rem;
  border-radius: 0.5rem;
  z-index: 900;
  border:1px solid var(--vs-border-color);
}
.editor--toc {
  padding:0 0.5rem;
}
.editor--outline li {
  padding: 0.25rem 0;
}
.text-editor__session-list .session-list .avatar-list .avatar-wrapper {
  margin: 0.2rem 0.1rem 0;
  width: 1.5rem;
  height: 1.5rem;
}

Turbulentarius avatar Nov 25 '24 12:11 Turbulentarius

Thanks for your report. I was able to reproduce, a fix is incoming.

mejo- avatar Dec 03 '24 13:12 mejo-

we have an issue reported in deck, of the same behavior still occuring: https://github.com/nextcloud/deck/issues/7082 I could also reproduce outside of deck in files app on c.nc.c using firefox mobile-view thing.

Don't really know how the isMobile mixin works in text but could it be that it's not based on the actual width of the text editor but maybe entire device width? I think deck is the only place where text is not almost the entire width, so that might be the cause.

grnd-alt avatar Jul 14 '25 10:07 grnd-alt