oui icon indicating copy to clipboard operation
oui copied to clipboard

[BUG] Missing style for basic tables in markdown rendering

Open smortex opened this issue 1 year ago • 2 comments

Describe the bug

When rendering tables in a markdown document e.g. in an OpenSearch Dashboards' notebook, the table does not have any CSS on top of the CSS reset, making it barely readable: all data is cluttered as there is no space between fields, making it hard to see where a column ends and the next one starts.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'Observability', 'Notebook'
  2. Create a Notebook
  3. Add a paragraph
  4. Add this sample content:
%md

Foo

| Mesure             | Avant   | Après  | Ratio |
|--------------------|---------|--------|-------|
| Backup incrémental | 3mn     | 20mn   | × 7   |
| Backup complet     | 1h      | 8h     | × 8   |
| Débit des backups  | 380kB/s | 62kB/s | ÷ 6   |

Bar

Expected behavior

Columns should be clearly separated, and there should be spacing above and bellow the table.

Screenshots

Current rendering of the above example (note the missing spacing between cells and after the table):

screenshot of a table hard to read

Adding some CSS can help, as an experiment I added this style to my browser to do some testing:

.euiText table {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  margin: 1em auto;
}

.euiText table th {
  border-bottom: 1px solid #000;
  text-align: left;
}

.euiText table th, .euiText table td {
  padding: 0 1em;
}

example with above css

Host/Environment (please complete the following information):

  • OUI Version: 1.3.0 I guess (what ships with the latest OSD)
  • OSD Version (if applicable): 2.11.1
  • OS: n/a
  • Browser and version n/a (Firefox)

smortex avatar Dec 27 '23 21:12 smortex

@smortex want to PR a fix?

Catch All Triage - 1 2 3 4 5

dblock avatar Jun 17 '24 16:06 dblock

@smortex want to PR a fix?

Unfortunately I am not versed in web development and fail to understand where I should begin to look to get started. If someone can point me to the right file / location to add this, and the methodology to make sure this has the expected result, that would be awesome!

smortex avatar Jun 24 '24 03:06 smortex