Skip to content

Commit 0a06cbb

Browse files
keshav-spacekeshav-space
committed
fix(ui): fix firefox table header overflow and button alignment
Signed-off-by: Keshav Priyadarshi <git@keshav.space>
1 parent d40a55f commit 0a06cbb

7 files changed

Lines changed: 67 additions & 32 deletions

File tree

‎vulnerabilities/templates/mitigation_curation.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,15 @@
1616
}
1717

1818
#table-header th {
19-
height: 100px;
20-
padding: 0.75rem 0.5rem !important;
19+
vertical-align: top !important;
20+
position: relative !important;
21+
padding: 0.75rem 0.5rem 3rem 0.5rem !important;
22+
border: none !important;
23+
box-shadow: inset 0 -1px 0 0 #dbdbdb !important;
2124
}
2225

23-
#table-header th>div {
24-
display: inline-flex !important;
25-
flex-direction: column !important;
26-
justify-content: space-between !important;
27-
height: 100% !important;
28-
width: 100%;
26+
#table-header th:not(:first-child) {
27+
box-shadow: inset 1px 0 0 0 #dbdbdb, inset 0 -1px 0 0 #dbdbdb !important;
2928
}
3029

3130
#table-header th:first-child {

‎vulnerabilities/templates/severity_curation.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,31 @@
1616
}
1717

1818
#table-header th {
19-
height: 130px;
2019
vertical-align: top !important;
21-
padding: 0.75rem 0.5rem !important;
20+
position: relative !important;
21+
padding: 0.75rem 0.5rem 3rem 0.5rem !important;
22+
border: none !important;
23+
box-shadow: inset 0 -1px 0 0 #dbdbdb !important;
24+
}
25+
26+
#table-header th:not(:first-child) {
27+
box-shadow: inset 1px 0 0 0 #dbdbdb, inset 0 -1px 0 0 #dbdbdb !important;
2228
}
2329

2430
#table-header th>div {
25-
display: inline-flex !important;
31+
display: flex !important;
2632
flex-direction: column !important;
27-
justify-content: space-between !important;
28-
height: 100% !important;
2933
width: 100%;
3034
}
3135

36+
#table-header th > div > button {
37+
position: absolute !important;
38+
bottom: 0.75rem !important;
39+
left: 0.5rem !important;
40+
right: 0.5rem !important;
41+
width: calc(100% - 1rem) !important;
42+
}
43+
3244
#table-header th:first-child {
3345
width: 300px !important;
3446
}

‎vulnerabilities/templates/weakness_curation.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,31 @@
3232
}
3333

3434
#table-header th {
35-
height: 140px;
3635
vertical-align: top !important;
37-
padding: 0.75rem 0.5rem !important;
36+
position: relative !important;
37+
padding: 0.75rem 0.5rem 3rem 0.5rem !important;
38+
border: none !important;
39+
box-shadow: inset 0 -1px 0 0 #dbdbdb !important;
40+
}
41+
42+
#table-header th:not(:first-child) {
43+
box-shadow: inset 1px 0 0 0 #dbdbdb, inset 0 -1px 0 0 #dbdbdb !important;
3844
}
3945

4046
#table-header th>div {
41-
display: inline-flex !important;
47+
display: flex !important;
4248
flex-direction: column !important;
43-
justify-content: space-between !important;
44-
height: 100% !important;
4549
width: 100%;
4650
}
4751

52+
#table-header th > div > button {
53+
position: absolute !important;
54+
bottom: 0.75rem !important;
55+
left: 0.5rem !important;
56+
right: 0.5rem !important;
57+
width: calc(100% - 1rem) !important;
58+
}
59+
4860
#table-header th:first-child {
4961
width: 150px !important;
5062
}

‎vulnerablecode/static/css/package_curation.css‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,31 @@
2626
}
2727

2828
#table-header th {
29-
height: 140px;
3029
vertical-align: top !important;
31-
padding: 0.75rem 0.5rem !important;
30+
position: relative !important;
31+
padding: 0.75rem 0.5rem 3rem 0.5rem !important;
32+
border: none !important;
33+
box-shadow: inset 0 -1px 0 0 #dbdbdb !important;
34+
}
35+
36+
#table-header th:not(:first-child) {
37+
box-shadow: inset 1px 0 0 0 #dbdbdb, inset 0 -1px 0 0 #dbdbdb !important;
3238
}
3339

3440
#table-header th>div {
35-
display: inline-flex !important;
41+
display: flex !important;
3642
flex-direction: column !important;
37-
justify-content: space-between !important;
38-
height: 100% !important;
3943
width: 100%;
4044
}
4145

46+
#table-header th > div > button {
47+
position: absolute !important;
48+
bottom: 0.75rem !important;
49+
left: 0.5rem !important;
50+
right: 0.5rem !important;
51+
width: calc(100% - 1rem) !important;
52+
}
53+
4254
#table-header th:first-child {
4355
width: 150px !important;
4456
}

‎vulnerablecode/static/js/package_curation.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const app = {
6868
<div>
6969
<div class="has-text-weight-bold">Curation</div>
7070
</div>
71-
<button class="button is-small is-outlined is-info mt-auto" onclick="app.resetCurrentCuration()">Reset</button>
71+
<button class="button is-small is-outlined is-info" onclick="app.resetCurrentCuration()">Reset</button>
7272
</div>
7373
</th>`;
7474

@@ -108,7 +108,7 @@ const app = {
108108
${toggleHtml}
109109
${primaryUidHtml}
110110
</div>
111-
<button class="button is-small is-info mt-auto" onclick="app.pickAdvisory(${groupIdx}, 'primary')">Pick This</button>
111+
<button class="button is-small is-info" onclick="app.pickAdvisory(${groupIdx}, 'primary')">Pick This</button>
112112
</div>
113113
`;
114114
header.appendChild(primaryTh);
@@ -131,7 +131,7 @@ const app = {
131131
<span class="icon is-small" ><i class="fa fa-external-link"></i></span>
132132
</a>
133133
</div>
134-
<button class="button is-small is-info is-light mt-auto" onclick="app.pickAdvisory(${groupIdx}, 'secondary', ${secIdx})">Pick This</button>
134+
<button class="button is-small is-info is-light" onclick="app.pickAdvisory(${groupIdx}, 'secondary', ${secIdx})">Pick This</button>
135135
</div>
136136
`;
137137
header.appendChild(secTh);

‎vulnerablecode/static/js/severity_curation.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ const app = {
131131
<div>
132132
<div class="has-text-weight-bold is-size-6">Curation</div>
133133
</div>
134-
<button class="button is-small is-outlined is-info mt-auto" onclick="app.resetCurrentCuration()">Reset</button>
134+
<button class="button is-small is-outlined is-info" onclick="app.resetCurrentCuration()">Reset</button>
135135
</div>
136136
</th>
137137
`;
@@ -174,7 +174,7 @@ const app = {
174174
${primaryUidHtml}
175175
</div>
176176
<button
177-
class="button is-small is-info mt-auto"
177+
class="button is-small is-info"
178178
onclick="app.pickAdvisory(${groupIdx}, 'primary')"
179179
${advGroup.primary.vector_string ? '' : 'disabled'}>
180180
Pick This
@@ -204,7 +204,7 @@ const app = {
204204
</div>
205205
<span class="is-info is-light mb-1 is-size-6">Score: ${sec.score || 'NA'}</span><br>
206206
<button
207-
class="button is-small is-info is-light mt-auto"
207+
class="button is-small is-info is-light"
208208
onclick="app.pickAdvisory(${groupIdx}, 'secondary')"
209209
${sec.vector_string ? '' : 'disabled'}>
210210
Pick This

‎vulnerablecode/static/js/weakness_curation.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const app = {
4646
<div>
4747
<div class="has-text-weight-bold">Curation</div>
4848
</div>
49-
<button class="button is-small is-outlined is-info mt-auto" onclick="app.resetCurrentCuration()">Reset</button>
49+
<button class="button is-small is-outlined is-info" onclick="app.resetCurrentCuration()">Reset</button>
5050
</div>
5151
</th>`;
5252

@@ -86,7 +86,7 @@ const app = {
8686
${toggleHtml}
8787
${primaryUidHtml}
8888
</div>
89-
<button class="button is-small is-info mt-auto" onclick="app.pickAdvisory(${groupIdx}, 'primary')">Pick This</button>
89+
<button class="button is-small is-info" onclick="app.pickAdvisory(${groupIdx}, 'primary')">Pick This</button>
9090
</div>
9191
`;
9292
header.appendChild(primaryTh);
@@ -109,7 +109,7 @@ const app = {
109109
<span class="icon is-small" ><i class="fa fa-external-link"></i></span>
110110
</a>
111111
</div>
112-
<button class="button is-small is-info is-light mt-auto" onclick="app.pickAdvisory(${groupIdx}, 'secondary', ${secIdx})">Pick This</button>
112+
<button class="button is-small is-info is-light" onclick="app.pickAdvisory(${groupIdx}, 'secondary', ${secIdx})">Pick This</button>
113113
</div>
114114
`;
115115
header.appendChild(secTh);

0 commit comments

Comments
 (0)