#3077 added scrolling to references. Centralized scrolling css

Author: jdaigneau5

src/assets/style/globals.scss

@@ -566,6 +566,7 @@ label {
   border-bottom: 1px solid lightgray;
   overflow-y: scroll;
   border-top: 1px solid lightgray;
+  padding: .75rem
 }
 
 

src/components/AdpVulnerabilityEnrichment.vue

@@ -71,12 +71,12 @@
               </div>
             </div>
           </div>
-          <div id="cve-kevs" v-if="kevs.length > 0 && roleName === 'adp'" class="cve-scroll-border-bottom mt-5">
+          <div id="cve-kevs" v-if="kevs.length > 0 && roleName === 'adp'" class="mt-5">
             <h4 class="title mb-0">KEV <span class="tag">{{ kevs.length }} Total</span></h4>
-            <div class="cve-learn-more cve-scroll-border-bottom">
+            <div class="cve-learn-more ">
               <router-link to="/CVERecord/UserGuide/#cve-kev" class="cve-learn-more-link">Learn more</router-link>
             </div>
-            <div class="cve-y-scroll mt-3 mb-3">
+            <div class="cve-y-scroll cve-scroll-box mt-3">
               <ul class="mt-1">
                 <li v-for="kev in kevs" :key="kev.key">
                   <a :href="kev.reference" target="_blank">{{ kev.reference }}</a><span class="is-italic cve-help-text"> ({{ kev.dateAdded }})</span>
@@ -131,13 +131,13 @@
           </div>
         </div>
         <div v-if="roleName !== 'cveProgram'">
-          <div id="cve-cwes" v-if="cwes.length > 0" class="cve-scroll-border-bottom mt-5">
+          <div id="cve-cwes" v-if="cwes.length > 0" class="mt-5">
             <h4 class="title mb-0">CWE <span class="tag">{{ cwes.length }} Total</span></h4>
-            <div class="cve-learn-more cve-scroll-border-bottom mb-5">
+            <div class="cve-learn-more mb-3">
               <router-link to="/CVERecord/UserGuide/#cve-cwe" class="cve-learn-more-link">Learn more</router-link>
             </div>
-            <div class="cve-y-scroll">
-              <ul class="mt-0 mb-3">
+            <div class="cve-y-scroll cve-scroll-box">
+              <ul class="mt-0 mb-0">
                 <li v-for="cwe in cwes" :key="cwe.key">
                   <a v-if="cwe.cweId !== 'CWE ID not provided'" :href="`https://cwe.mitre.org/data/definitions/${cwe.cweNumber}.html`" target="_blank">
                     <span class="has-text-weight-bold">{{ cwe.cweId }}<span v-if="cwe.description.length > 0">: </span></span>
@@ -461,7 +461,4 @@ export default {
     overflow-y: scroll;
   }
 
-  .cve-scroll-border-bottom {
-    border-bottom: 1px solid lightgray;
-  }
 </style>

src/components/CveRecordReferences.vue

@@ -3,9 +3,9 @@
     class="mt-5"
     style="word-break:break-all;"
   >
-    <h4 class="title mb-2">References <span class="tag">{{ references.length }} Total</span></h4>
-    <div class="cve-scroll-box p-5">
-      <ul>
+    <h4 class="title mb-3">References <span class="tag">{{ references.length }} Total</span></h4>
+    <div class="cve-scroll-box">
+      <ul class="mt-0">
         <li v-for="(reference, index) in references" :key="`link-${index}`" class="cve-word-wrap">
           <span class="icon-text">
             <a :href="reference.url" target="_blank">

src/components/ProductStatus.vue

@@ -33,7 +33,7 @@
               <p class="cve-product-status-heading pb-1" >
                 Versions <span class="tag">{{ versionsCount(product) }} Total</span>
               </p>
-              <div class="cve-scroll-box pt-3">
+              <div class="cve-scroll-box pt-1">
                 <div class="column is-12-desktop mb-4">
                   <div id="cve-version-default-status">
                     <p v-if="product.defaultStatus" class="cve-help-text is-italic">