luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

style: fix up very long tag word breaking the allocation service table width (#11995)

This commit is contained in:
ttys3 2022-02-05 08:40:03 +08:00 committed by GitHub
parent 0600bc32e2
commit 5faf344152
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/11995.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: break long service tags into multiple lines
```

6
ui/app/styles/core/table.scss
View File

@ -1,4 +1,4 @@
@use "sass:math"; @use 'sass:math';
.table { .table {
color: $text; color: $text;
@ -103,6 +103,10 @@
} }
} }
&.is-long-text {
word-break: break-word;
}
// Only use px modifiers when text needs to be truncated. // Only use px modifiers when text needs to be truncated.
// In this and only this scenario are percentages not effective. // In this and only this scenario are percentages not effective.
&.is-200px { &.is-200px {

2
ui/app/templates/allocations/allocation/index.hbs
View File

@ -173,7 +173,7 @@
<tr data-test-service> <tr data-test-service>
<td data-test-service-name>{{row.model.name}}</td> <td data-test-service-name>{{row.model.name}}</td>
<td data-test-service-port>{{row.model.portLabel}}</td> <td data-test-service-port>{{row.model.portLabel}}</td>
<td data-test-service-tags>{{join ", " row.model.tags}}</td> <td data-test-service-tags class="is-long-text">{{join ", " row.model.tags}}</td>
<td data-test-service-onupdate>{{row.model.onUpdate}}</td> <td data-test-service-onupdate>{{row.model.onUpdate}}</td>
<td data-test-service-connect>{{if row.model.connect "Yes" "No"}}</td> <td data-test-service-connect>{{if row.model.connect "Yes" "No"}}</td>
<td data-test-service-upstreams> <td data-test-service-upstreams>