Skip to content

Commit e2b4484

Browse files
keshav-spacekeshav-space
committed
fix(ui): prevent long version string from overflowing
Signed-off-by: Keshav Priyadarshi <git@keshav.space>
1 parent 9a08522 commit e2b4484

2 files changed

Lines changed: 124 additions & 124 deletions

File tree

‎vulnerablecode/static/css/package_curation.css‎

Lines changed: 123 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,126 @@
1-
.state-affected {
2-
background-color: #f14668 !important;
3-
color: #fff !important;
4-
}
5-
6-
.state-fixed {
7-
background-color: #48c78e !important;
8-
color: #fff !important;
9-
}
10-
11-
.state-empty {
12-
background-color: #ffdd57 !important;
13-
color: #000 !important;
14-
box-shadow: inset 0 0 0 1px #dbdbdb;
15-
}
16-
17-
.table {
18-
table-layout: fixed !important;
19-
width: 100% !important;
20-
}
21-
22-
.table th {
23-
border-width: 0 1px 1px 1px !important;
24-
border-color: #dbdbdb !important;
25-
background-color: #fff !important;
26-
}
27-
28-
#table-header th {
29-
height: 140px;
30-
vertical-align: top !important;
31-
padding: 0.75rem 0.5rem !important;
32-
}
33-
34-
#table-header th>div {
35-
display: inline-flex !important;
36-
flex-direction: column !important;
37-
justify-content: space-between !important;
38-
height: 100% !important;
39-
width: 100%;
40-
}
41-
42-
#table-header th:first-child {
43-
width: 150px !important;
44-
}
45-
46-
#table-header th:nth-child(2) {
47-
width: 150px !important;
48-
}
49-
50-
#table-header th:nth-child(n+3) {
51-
width: 120px !important;
52-
}
53-
54-
.curation-cell {
55-
cursor: pointer;
56-
text-align: center !important;
57-
user-select: none;
58-
transition: background-color 0.1s ease;
59-
border: 1px solid #dbdbdb !important;
60-
}
61-
62-
.curation-cell:hover {
63-
filter: brightness(0.95);
64-
box-shadow: inset 0 0 0 1px #3273dc;
65-
}
66-
67-
.advisory-cell {
68-
cursor: not-allowed;
69-
word-break: break-all;
70-
}
71-
72-
.folded-row-marker,
73-
.range-row-marker {
74-
cursor: pointer;
75-
text-align: center;
76-
color: #4a4a4a;
77-
font-weight: 600;
78-
background-color: #f5f5f5;
79-
}
80-
81-
.folded-row-marker.is-expanded .icon {
82-
transform: rotate(180deg);
83-
}
84-
85-
.range-data-cell {
86-
background-color: #fafafa;
87-
padding: 6px !important;
88-
vertical-align: top !important;
89-
border: 1px solid #dbdbdb !important;
90-
91-
white-space: normal !important;
92-
word-break: break-all !important;
93-
overflow-wrap: break-word !important;
94-
}
95-
96-
#summaries-container p strong {
97-
display: block;
98-
word-break: break-all;
99-
overflow-wrap: break-word;
100-
line-height: 1.3;
101-
margin-bottom: 4px;
102-
}
103-
104-
.summary-text {
105-
line-height: 1.4;
106-
white-space: pre-wrap;
107-
word-break: break-word;
108-
}
109-
110-
div.summary-text a:link,
111-
div.summary-text a {
112-
color: #3273dc !important;
113-
}
114-
115-
div.summary-text a:visited {
116-
color: #8a4de8 !important;
117-
}
118-
119-
div.summary-text a:hover {
120-
color: #0a0a0a !important;
121-
}
122-
123-
.advisory-wrapper {
1+
.state-affected {
2+
background-color: #f14668 !important;
3+
color: #fff !important;
4+
}
5+
6+
.state-fixed {
7+
background-color: #48c78e !important;
8+
color: #fff !important;
9+
}
10+
11+
.state-empty {
12+
background-color: #ffdd57 !important;
13+
color: #000 !important;
14+
box-shadow: inset 0 0 0 1px #dbdbdb;
15+
}
16+
17+
.table {
18+
table-layout: fixed !important;
19+
width: 100% !important;
20+
}
21+
22+
.table th {
23+
border-width: 0 1px 1px 1px !important;
24+
border-color: #dbdbdb !important;
25+
background-color: #fff !important;
26+
}
27+
28+
#table-header th {
29+
height: 140px;
30+
vertical-align: top !important;
31+
padding: 0.75rem 0.5rem !important;
32+
}
33+
34+
#table-header th>div {
35+
display: inline-flex !important;
36+
flex-direction: column !important;
37+
justify-content: space-between !important;
38+
height: 100% !important;
39+
width: 100%;
40+
}
41+
42+
#table-header th:first-child {
43+
width: 150px !important;
44+
}
45+
46+
#table-header th:nth-child(2) {
47+
width: 150px !important;
48+
}
49+
50+
#table-header th:nth-child(n+3) {
51+
width: 120px !important;
52+
}
53+
54+
.curation-cell {
55+
cursor: pointer;
56+
text-align: center !important;
57+
user-select: none;
58+
transition: background-color 0.1s ease;
59+
border: 1px solid #dbdbdb !important;
60+
}
61+
62+
.curation-cell:hover {
63+
filter: brightness(0.95);
64+
box-shadow: inset 0 0 0 1px #3273dc;
65+
}
66+
67+
.advisory-cell {
68+
cursor: not-allowed;
69+
word-break: break-all;
70+
}
71+
72+
.folded-row-marker,
73+
.range-row-marker {
74+
cursor: pointer;
75+
text-align: center;
76+
color: #4a4a4a;
77+
font-weight: 600;
78+
background-color: #f5f5f5;
79+
}
80+
81+
.folded-row-marker.is-expanded .icon {
82+
transform: rotate(180deg);
83+
}
84+
85+
.range-data-cell {
86+
background-color: #fafafa;
87+
padding: 6px !important;
88+
vertical-align: top !important;
89+
border: 1px solid #dbdbdb !important;
90+
91+
white-space: normal !important;
92+
word-break: break-all !important;
93+
overflow-wrap: break-word !important;
94+
}
95+
96+
#summaries-container p strong {
97+
display: block;
98+
word-break: break-all;
99+
overflow-wrap: break-word;
100+
line-height: 1.3;
101+
margin-bottom: 4px;
102+
}
103+
104+
.summary-text {
105+
line-height: 1.4;
106+
white-space: pre-wrap;
107+
word-break: break-word;
108+
}
109+
110+
div.summary-text a:link,
111+
div.summary-text a {
112+
color: #3273dc !important;
113+
}
114+
115+
div.summary-text a:visited {
116+
color: #8a4de8 !important;
117+
}
118+
119+
div.summary-text a:hover {
120+
color: #0a0a0a !important;
121+
}
122+
123+
.advisory-wrapper {
124124
width: 100%;
125125
word-break: break-all;
126126
white-space: normal;

‎vulnerablecode/static/js/package_curation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const app = {
238238
createRow(v, item) {
239239
const tr = document.createElement('tr');
240240
const state = this.userStates[this.currentIndex][v];
241-
tr.innerHTML = `<td class="has-text-weight-bold">${v}</td>`;
241+
tr.innerHTML = `<td class="has-text-weight-bold" style="word-break: break-all;">${v}</td>`;
242242
const userTd = document.createElement('td');
243243
userTd.className = `curation-cell state-${state}`;
244244
userTd.innerText = state === "empty"? "Select value": state.toUpperCase();

0 commit comments

Comments
 (0)