Update styling

web/static/script.js

@@ -10,6 +10,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const imageElement = document.createElement("img");
     imageElement.src = "static/loading.gif";
+    imageElement.style.height = "100px";
     predictedImagesContainer.appendChild(imageElement);
 
     const selectedFeature = featureSelect.value;

web/static/styles.css

@@ -22,7 +22,7 @@ body {
 .dropzone {
   margin-top: 20px;
   width: 95%;
-  border: 2px solid #000000;
+  border: 2px dashed #000000;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -35,6 +35,8 @@ body {
   width: 95%;
   border: 2px solid #000000;
   display: block;
+  justify-content: center;
+  align-items: center;
   margin: 20px auto; /* Auto margins for horizontal centering */
 }
 
@@ -46,14 +48,6 @@ body {
   align-items: center;
 }
 
-#predicted-images {
-  width: 90%;
-  display: grid;
-  row-gap: 1%;
-  column-gap: 1%;
-  grid-template-columns: repeat(1, 1fr);
-}
-
 /* The container for the predicted images */
 #predicted-images {
   display: grid;
@@ -67,7 +61,7 @@ body {
 
 /* The predicted image */
 #predicted-images img {
-  width: 100%; 
+  width: 90%; 
   height: auto;
   display: block; 
   align-items: center;
@@ -163,7 +157,6 @@ visibility: visible; /* Show the tooltip on image hover */
   }
 
   .dropzone {
-    min-height: 500px;
     width: 48%;
   }