opensearch-project / oui

OpenSearch UI Framework
Apache License 2.0
31 stars 65 forks source link

[BUG] Missing style for basic tables in markdown rendering #1194

Open smortex opened 6 months ago

smortex commented 6 months ago

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):

dblock commented 3 weeks ago

@smortex want to PR a fix?

Catch All Triage - 1 2 3 4 5

smortex commented 2 weeks ago

@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!