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/assets/styles/_bootstrap-grid.scss b/src/assets/styles/_bootstrap-grid.scss
new file mode 100644
index 0000000..7ad7c81
--- /dev/null
+++ b/src/assets/styles/_bootstrap-grid.scss
@@ -0,0 +1,8 @@
+.container-xl {
+ // Fluid layout container class sets 100%
+ // width until xl breakpoint. Once a max-width
+ // is set, setting the left margin to 0 is needed
+ // so the content doesn't center align
+ // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
+ margin-left: 0;
+}
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 4e0e1c5..7e43e62 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -41,6 +41,7 @@
@import "./alerts";
@import "./badge";
+@import "./bootstrap-grid";
@import "./buttons";
@import "./dropdown";
@import "./form-components";
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 8c7cc7f..962e5bf 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -1,5 +1,5 @@
<template>
- <b-container fluid>
+ <b-container fluid="xl">
<page-title />
<b-row>
<b-col xl="9" class="text-right">
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 }}
diff --git a/src/views/Control/RebootBmc/RebootBmc.vue b/src/views/Control/RebootBmc/RebootBmc.vue
index 5d6b42c..1291253 100644
--- a/src/views/Control/RebootBmc/RebootBmc.vue
+++ b/src/views/Control/RebootBmc/RebootBmc.vue
@@ -1,5 +1,5 @@
<template>
- <b-container fluid>
+ <b-container fluid="xl">
<page-title />
<b-row>
<b-col md="8" lg="8" xl="6">
diff --git a/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue
index e63d073..4efaebc 100644
--- a/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Control/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,5 +1,5 @@
<template>
- <b-container fluid>
+ <b-container fluid="xl">
<page-title />
<b-row>
<b-col md="8" xl="6">
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index ae31cc3..fe9d397 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -1,5 +1,5 @@
<template>
- <b-container fluid>
+ <b-container fluid="xl">
<page-title />
<b-row>
<b-col xl="12" class="text-right">
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 156667b..3c55a8c 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -1,5 +1,5 @@
<template>
- <b-container fluid>
+ <b-container fluid="xl">
<page-title />
<div class="quicklinks-section">
<overview-quick-links />