Skip to content

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

@Turbulentarius

Description

@Turbulentarius

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;
}

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

Status

☑️ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions