Fix: name column in the dashboad being squashed in some aspect ratios (#4193)
Some checks are pending
Auto Test / auto-test (18, ARM64) (push) Blocked by required conditions
Auto Test / auto-test (18, macos-latest) (push) Blocked by required conditions
Auto Test / auto-test (18, ubuntu-latest) (push) Blocked by required conditions
Auto Test / auto-test (18, windows-latest) (push) Blocked by required conditions
Auto Test / auto-test (20.5, ARM64) (push) Blocked by required conditions
Auto Test / auto-test (20.5, macos-latest) (push) Blocked by required conditions
Auto Test / auto-test (20.5, ubuntu-latest) (push) Blocked by required conditions
Auto Test / auto-test (20.5, windows-latest) (push) Blocked by required conditions
Auto Test / armv7-simple-test (18, ARMv7) (push) Blocked by required conditions
Auto Test / armv7-simple-test (20, ARMv7) (push) Blocked by required conditions
Auto Test / check-linters (push) Waiting to run
Auto Test / e2e-test (push) Blocked by required conditions
CodeQL / Analyze (go) (push) Waiting to run
CodeQL / Analyze (javascript-typescript) (push) Waiting to run
Merge Conflict Labeler / Labeling (push) Waiting to run
json-yaml-validate / json-yaml-validate (push) Waiting to run

This commit is contained in:
Jay Bhanushali 2024-08-24 23:14:51 +05:30 committed by GitHub
parent 9486fa22ee
commit 3e88772e5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -57,7 +57,7 @@
</thead>
<tbody>
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
<td><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
<td class="name-column"><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
<td><Status :status="beat.status" /></td>
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
<td class="border-0">{{ beat.msg }}</td>
@ -233,4 +233,16 @@ table {
overflow-wrap: break-word;
}
}
@media screen and (max-width: 1280px) {
.name-column {
min-width: 150px;
}
}
@media screen and (min-aspect-ratio: 4/3) {
.name-column {
min-width: 200px;
}
}
</style>