From 70fb9ba51c244f1f3b5a8a5ecb4053bf2921d83f Mon Sep 17 00:00:00 2001
From: ImSreyas <sreyassatheesh755@gmail.com>
Date: Wed, 3 Jan 2024 10:08:05 +0530
Subject: [PATCH] :bug: Loader not aligning to the center issue solved.

---
 main.css |  2 +-
 main.js  | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/main.css b/main.css
index 96c114b..6ce1bc5 100644
--- a/main.css
+++ b/main.css
@@ -49,7 +49,7 @@ body {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
-    min-height: 32rem;
+    /* min-height: 32rem; */
     padding-block-end: 6.6rem;
 }
 .main[interact="false"]{
diff --git a/main.js b/main.js
index 30ee575..0b1bc7f 100644
--- a/main.js
+++ b/main.js
@@ -115,4 +115,14 @@ const create = (result) => {
 // Event listener for close button in result shower.
 document.querySelector(".close-btn").addEventListener("click", () => {
     resultContainer.setAttribute("show", "false");
-})
\ No newline at end of file
+})
+
+// Setting the height (min height) of main container for aligning loader in the center.
+const tool = document.querySelector(".tool") // Selecting the tool container.
+const resizeLoader = () => {
+    const toolBoxHeight = tool.clientHeight // Getting the height of the toolbox
+    const mainTop = main.getBoundingClientRect().top // Getting the top bound of main element (element to top of the window).
+    main.style.minHeight = `calc(100vh - ${toolBoxHeight + mainTop }px - 1.5rem)` // Setting the min height to the main element, because the loader wrapper is inside the main container.
+}
+resizeLoader() // calling the resize function.
+window.addEventListener("resize", resizeLoader) // adding a resize event listener on document.
\ No newline at end of file