calejocontrol
/
CalejoControl
1
0
Fork 0
Code Issues Pull Requests 4 Packages Projects Releases Wiki Activity

Fix protocol signals table layout overflow and responsive design

This commit is contained in:
openhands 2025-11-14 12:40:24 +00:00
parent 2a36891e8c
commit ed2de305fc
1 changed files with 85 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
static/simplified_styles.css
View File

@ -157,18 +157,59 @@ body {
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
padding: 15px;
padding: 12px 8px;
text-align: left;
border-bottom: 1px solid #e1e5e9;
word-wrap: break-word;
overflow-wrap: break-word;
vertical-align: top;
}
/* Set specific column widths to prevent overflow */
th:nth-child(1), td:nth-child(1) { /* Signal Name */
width: 20%;
min-width: 120px;
}
th:nth-child(2), td:nth-child(2) { /* Protocol Type */
width: 12%;
min-width: 100px;
}
th:nth-child(3), td:nth-child(3) { /* Tags */
width: 20%;
min-width: 150px;
}
th:nth-child(4), td:nth-child(4) { /* Protocol Address */
width: 15%;
min-width: 100px;
}
th:nth-child(5), td:nth-child(5) { /* Database Source */
width: 18%;
min-width: 120px;
}
th:nth-child(6), td:nth-child(6) { /* Status */
width: 8%;
min-width: 80px;
}
th:nth-child(7), td:nth-child(7) { /* Actions */
width: 7%;
min-width: 100px;
}
th {
background: #f8f9fa;
font-weight: 600;
color: #555;
white-space: nowrap;
}
tr:hover {
@ -351,11 +392,53 @@ tr:hover {
gap: 15px;
}
.signals-table {
overflow-x: auto;
}
table {
font-size: 14px;
min-width: 800px;
}
th, td {
padding: 10px;
padding: 8px 6px;
font-size: 13px;
}
/* Adjust column widths for mobile */
th:nth-child(1), td:nth-child(1) { /* Signal Name */
width: 22%;
min-width: 100px;
}
th:nth-child(2), td:nth-child(2) { /* Protocol Type */
width: 14%;
min-width: 80px;
}
th:nth-child(3), td:nth-child(3) { /* Tags */
width: 18%;
min-width: 120px;
}
th:nth-child(4), td:nth-child(4) { /* Protocol Address */
width: 16%;
min-width: 80px;
}
th:nth-child(5), td:nth-child(5) { /* Database Source */
width: 16%;
min-width: 100px;
}
th:nth-child(6), td:nth-child(6) { /* Status */
width: 8%;
min-width: 60px;
}
th:nth-child(7), td:nth-child(7) { /* Actions */
width: 6%;
min-width: 80px;
}
}