fixed styling for subheader

package-lock.json

@@ -3571,9 +3571,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
-      "integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA=="
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
+      "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ=="
     },
     "brace-expansion": {
       "version": "1.1.11",

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "axios": "^0.27.2",
-    "bootstrap": "^5.1.1",
+    "bootstrap": "^5.2.2",
     "jest-junit": "^13.0.0",
     "maska": "^1.5.0",
     "pinia": "^2.0.22",

src/common-components/site-sub-header/site-sub-header.vue

@@ -1,8 +1,14 @@
 <template>
     <div>
-        <div id="subHeader" v-html="content"></div>
+      <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+        <h5 class="text-center fw-normal mb-0" :class="headerColor">
+          <span>
+            {{ content }}
+          </span>
+        </h5>
+      </div>
     </div>
-</template>
+  </template>
 
 <script>
     export default ({
@@ -19,9 +25,13 @@
     })
 </script>
 
+  
 <style lang="scss" scoped>
-    #subHeader{
-        margin: 16px auto;
-        text-align: center;
-    }
+h5 {
+  line-height: 32px;
+
+  button {
+    color: inherit;
+  }
+}
 </style>