UI – Apply missing truncation and overflow styles to SW OS table (#16971)
## –> #16941 <img width="968" alt="Screenshot 2024-02-19 at 2 20 12 PM" src="https://github.com/fleetdm/fleet/assets/61553566/461d7eab-57ac-45e9-aa36-1310118caacd"> - [x] Changes file added for user-visible changes in `changes/` - [x] Manual QA --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
co-authored by
Jacob Shandling
parent
9080ff5361
commit
4df1159d75
@@ -0,0 +1 @@
|
||||
- Fix a bug where long OS names caused the table to render outside its bounds with smaller viewports
|
||||
@@ -25,12 +25,31 @@
|
||||
.table-container {
|
||||
&__data-table-block {
|
||||
.data-table-block {
|
||||
.data-table__table {
|
||||
tbody {
|
||||
.link-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pad-small;
|
||||
.data-table {
|
||||
&__wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
&__table {
|
||||
tbody {
|
||||
.name_only__cell {
|
||||
max-width: $col-md;
|
||||
|
||||
// Tooltip does not get cut off
|
||||
.children-wrapper {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
// ellipsis for software name
|
||||
.software-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.link-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pad-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user