GSK-1303 - Feature/gsk 1271 test UI status message gets squeezed spacing uneven

[kevinmessiaen]

Description

Type of Change

• 📚 Examples / docs / tutorials / dependencies update
• 🔧 Bug fix (non-breaking change which fixes an issue)
• 🥂 Improvement (non-breaking change which improves an existing feature)
• 🚀 New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 🔐 Security fix

[linear]

GSK-1271 Test UI: status message gets squeezed, spacing uneven

Screenshot 2023-06-07 at 14.11.31.png

• squeezed text
• random dots

flex-wrap: wrap might help 🪄

This affects also (and in particular) the "comparison" view because the layout is half width.

[linear]

GSK-1303 UI issues with incorrect test suite comparison results display

Notebook: https://github.com/Giskard-AI/giskard-examples/blob/main/to_review/Sentiment_Analysis_for_Twitter_Data_updated.ipynb

Screenshot 2023-06-13 at 12.57.40.png

Also non-clear drop-down list:

45708801-23d2-4cf2-b456-b15055dbea99

[henchaves]

I think we should add some spaces here.

Suggested change

	<span v-if='successRatio.failed > 0'>{{ plurialize('test', successRatio.failed) }} failed</span>
	<span v-if='successRatio.failed > 0 && successRatio.passed > 0'>, </span>
	<span v-if='successRatio.passed > 0'>{{ plurialize('test', successRatio.passed) }} passed</span>
	<span v-if='successRatio.failed > 0 || successRatio.passed > 0'>. </span>
	Executed
	<span class='ml-2'>{{ timeSince(execution.executionDate) }}</span>
	<span v-if='successRatio.failed > 0'>&nbsp;{{ plurialize('test', successRatio.failed) }} failed</span>
	<span v-if='successRatio.failed > 0 && successRatio.passed > 0'>, </span>
	<span v-if='successRatio.passed > 0'>&nbsp;{{ plurialize('test', successRatio.passed) }} passed</span>
	<span v-if='successRatio.failed > 0 || successRatio.passed > 0'>. </span>
	&nbsp;Executed
	<span>&nbsp;{{ timeSince(execution.executionDate) }}</span>

[andreybavt]

I agree, either spaces or padding between spans should look nice

[kevinmessiaen]

Instead of space I removed the parent flex that was not required, the space are not needed anymore

[andreybavt]

as Henrique mentioned let's add more spacing about spans

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
0.0% Duplication