fix back button margins

bcgov · May 8, 2024 · 3b35e64 · 3b35e64
1 parent bca7fbf
commit 3b35e64
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/frontend/src/components/DraftReportPage.vue b/frontend/src/components/DraftReportPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100">
+  <v-container class="d-flex justify-center h-100 narrow">
     <v-form ref="inputForm" class="w-100 h-100">
       <v-banner
         sticky
@@ -185,8 +185,14 @@ async function downloadPdf(reportId: string | undefined) {
 <style scoped lang="scss">
 @import "../scss/_common.scss";
 
-.back-button-banner {
-  width: 90% !important;
+.narrow {
+  width: 85% !important;
+  padding-left: 0;
+  padding-right: 0;
   @include layout-margins;
+} 
+
+.back-button-banner {
+  padding-left: 0;
 }
 </style>
diff --git a/frontend/src/components/InputForm.vue b/frontend/src/components/InputForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100">
+  <v-container class="d-flex justify-center h-100 narrow">
     <v-form ref="inputForm" @submit.prevent="submit" class="w-100 h-100">
       <v-row no-gutters>
         <v-col>
@@ -1165,18 +1165,18 @@ export default {
 
 @import "../scss/_common.scss";
 
-.back-button-banner {
-  width: 90% !important;
+.narrow {
+  width: 85% !important;
   padding-left: 0;
   padding-right: 0;
   @include layout-margins;
 } 
 
-.alert-info {
-  width: 90% !important;
-  @include layout-margins;
+.back-button-banner {
+  padding-left: 0;
 }
 
+
 textarea::placeholder {
   text-align: right;
   transform: translateY(95px);

diff --git a/frontend/src/components/PublishedReportPage.vue b/frontend/src/components/PublishedReportPage.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-container class="d-flex justify-center h-100">
+  <v-container class="d-flex justify-center h-100 narrow">
     <v-form ref="inputForm" class="w-100 h-100">
       <v-banner
         sticky
-        width=" fit-content"
+        width="fit-content"
         border="none"
         bg-color="rgba(255, 255, 255, 0)"
         class="sticky-top"
@@ -112,15 +112,20 @@ const editReport = async () => {
 <style lang="scss">
 @import '../scss/_common.scss';
 
-.sticky-top {
-  @include layout-margins;
-  width: 90% !important;
+.narrow {
+  width: 85% !important;
   padding-left: 0;
   padding-right: 0;
+  @include layout-margins;
+} 
+
+.sticky-top {
+  padding-left: 0;
   z-index: 190;
   bottom: none !important;
   top: 0px !important;
 }
+
 .sticky-bottom {
   z-index: 191;
   bottom: 0px !important;