Update static/style.css

static/style.css

@@ -130,16 +130,36 @@ body{
     position: absolute;
 }
 
-#imgContainer {
-    display: inline-block; /* Makes each imgContainer inline and block level */
-    margin-bottom: 20px; /* Adds spacing below each container */
-    flex-basis: calc(100% - 40px); /* Ensures each container has a minimum width */
-    flex-shrink: 0; /* Prevents the container from shrinking */
-    z-index: 90;
+.imgContainer {
+    display: flex;
+    flex-direction: column;   /* images on top, buttons below */
+    gap: 15px;
+    margin-bottom: 1px;
+    padding: 2px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    width: fit-content;       /* only as wide as needed */
+    /* max-width: 100%;          /* don’t overflow parent */ */
+}
+
+.imgsWrapperContainer {
+    display: flex;
+    gap: 15px;
+    overflow-x: auto;       /* enable horizontal scroll */
+    max-width: 850px;       /* only as wide as one image (adjust to taste) */
+    /* or try width: 100%; if you want it responsive */
+    white-space: nowrap;    /* keep items in one row */
+}
+
+.imgsWrapperContainer img {
+    flex-shrink: 0;         /* don’t shrink images */
+    border-radius: 8px;
+    cursor: pointer;
+    height: 600px;
 }
 
 #backgroundimg {
-    margin-top: 10px;
+    margin-top: 1px;
     display: flex; /* Use flexbox to align items horizontally */
     /* flex-wrap: wrap; Allows items to wrap to the next line if they exceed container width */
     background-color: lightgrey;
@@ -147,6 +167,7 @@ body{
     overflow: auto;
     white-space: nowrap;
     padding: 20px;
+  margin-left:120px;
 }
 
 #underimgbuttons, #imgs {