Update layout fluid prop to set max-width
Setting page container fluid prop to 'xl' to allow fluid/100%
container width until reaching the xl breakpoint. After
reaching the xl breakpoint, a max-width is set to the
container.
This will make sure that the page content doesn't stretch
into an unreasonable layout on wide viewports.
https://bootstrap-vue.org/docs/components/layout#fluid-width-container
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic50dd3b4339d532663279350afdcc30e59bb0c74
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index 79cdea6..6f74c81 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -1,8 +1,8 @@
<template>
- <b-container fluid>
+ <b-container fluid="xl">
<page-title />
<b-row>
- <b-col xl="9">
+ <b-col xl="11">
<!-- Expired certificates banner -->
<alert :show="expiredCertificateTypes.length > 0" variant="danger">
<template v-if="expiredCertificateTypes.length > 1">
@@ -32,7 +32,7 @@
</b-col>
</b-row>
<b-row>
- <b-col xl="10" class="text-right">
+ <b-col xl="11" class="text-right">
<b-button v-b-modal.generate-csr variant="link">
<icon-add />
{{ $t('pageSslCertificates.generateCsr') }}
@@ -48,7 +48,7 @@
</b-col>
</b-row>
<b-row>
- <b-col xl="10">
+ <b-col xl="11">
<b-table :fields="fields" :items="tableItems">
<template v-slot:cell(validFrom)="{ value }">
{{ value | formatDate }}