Backups: let the runs table scroll on narrow screens

The table could not shrink below its content width and ran off the page,
cutting off the last columns; wrap it in an overflow-x container.
This commit is contained in:
2026-10-07 23:56:28 +02:00
parent 972a52e665
commit 695d972785
+4 -1
View File
@@ -30,7 +30,8 @@
</div> </div>
</template> </template>
<table v-if="status.runs.length" class="ngb-table"> <div v-if="status.runs.length" class="ngb-table-wrap">
<table class="ngb-table">
<thead> <thead>
<tr> <tr>
<th>{{ t('ng_backup', 'Started') }}</th> <th>{{ t('ng_backup', 'Started') }}</th>
@@ -54,6 +55,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</NcSettingsSection> </NcSettingsSection>
</template> </template>
@@ -126,6 +128,7 @@ async function saveSchedule() {
<style scoped> <style scoped>
.ngb-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; } .ngb-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.ngb-time { max-width: 260px; } .ngb-time { max-width: 260px; }
.ngb-table-wrap { overflow-x: auto; }
.ngb-table { width: 100%; border-collapse: collapse; } .ngb-table { width: 100%; border-collapse: collapse; }
.ngb-table th, .ngb-table td { text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--color-border); } .ngb-table th, .ngb-table td { text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
.ngb-failed { color: var(--color-error-text); } .ngb-failed { color: var(--color-error-text); }