fix: css issue : title overlapping, issue with odd no. of boxes fixed

Author: ajaykirarkit

src/main.ts

@@ -96,7 +96,7 @@ class MappingInputProvider extends HTMLElement {
     //Box of detailed contents like image, description of mapping
     const mappingIdsEndpoint = this.baseUrl.toString() + "api/v1/mappingAdministration/";
     let optionsContainer: HTMLElement = <HTMLInputElement>(
-      this.shadowRoot.getElementById('options-container')
+      this.shadowRoot.getElementById('options-container options-center')
     );
     // Remove any existing event listeners before adding a new one
     optionsContainer.removeEventListener("click", this.handleButtonClick.bind(this));
@@ -148,6 +148,11 @@ class MappingInputProvider extends HTMLElement {
             });
           }
           optionsContainer.appendChild(division);
+          if (mappingIds.length < 5) {
+            optionsContainer.classList.add('options-center'); // Add the class if less than 5 cards
+          } else {
+            optionsContainer.classList.remove('options-center'); // Remove the class if more than 5 cards
+          }
         })
       }).catch(error => {
         console.error('Error while fetch Mapping Ids' + error)

src/style.css

@@ -79,14 +79,19 @@ button:hover {
   padding: 1.25rem;
 }
 
+/* The common styles for options-container */
 .options-container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: center;
   overflow-x: auto;
   padding-bottom: 0.625rem;
 }
 
+/* The class to center the container */
+.options-center {
+  justify-content: center;
+}
+
 .cards {
   flex: 0 0 calc(25% - 1.25rem);
   display: flex;
@@ -101,16 +106,16 @@ button:hover {
   margin: 0.625rem;
   overflow: hidden;
   position: relative;
-  min-width: 12.5rem;
+  min-width: 18.5rem;
   /* Added minimum width for better mobile view */
   background-color: #eef3f4;
   /* Add your desired background color here */
-}     
+}
 
 .cards img {
   max-width: 6.25rem;
   margin-bottom: 0.625rem;
-} 
+}
 
 .cards h2 {
   margin-bottom: 0.625rem;
@@ -136,4 +141,4 @@ button:hover {
 .section-heading {
   /* background-color: #c52222; */
   font-size: large;
-}
+}

src/template.html

@@ -6,7 +6,7 @@ <h1 class="home-text08">Mapping Component</h1>
 		</span>
 	</div>
 	<div class="container-wrapper">
-		<div id="options-container" class="options-container">
+		<div id="options-container options-center" class="options-container">
 		</div>
 	</div>
 </div>