Image Popup Expands Page Width when add lengthy comment on Click in Image Gallery.

src/pages/Gallary/ImagePop.css

@@ -1,103 +1,149 @@
+/* Image Modal Overlay */
 .image-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9999; /* High z-index to ensure it's on top */
+  z-index: 9999;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
+  background-color: rgba(0, 0, 0, 0.85);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+/* Main Modal Content Box */
 .image-modal-content {
   background: #fff;
   padding: 24px;
-  max-width: 90%; /* Responsive max-width */
-  max-height: 100%; /* Responsive max-height */
+  max-width: 50%;
+  max-height: 95vh; /* Limits the modal's height to 95% of viewport height */
   border-radius: 12px;
   position: relative;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   text-align: center;
-  display: flex; /* Use flexbox for internal layout */
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  overflow-y: auto; /* Enables vertical scrolling */
+
+  /* --- HIDE SCROLLBAR FOR MAIN MODAL CONTENT --- */
+  /* For Webkit browsers (Chrome, Safari, Edge) */
+  &::-webkit-scrollbar {
+    width: 0px; /* Hide vertical scrollbar */
+    height: 0px; /* Hide horizontal scrollbar, though unlikely needed here */
+  }
+  /* For Firefox */
+  scrollbar-width: none; /* Hide scrollbar in Firefox */
+  /* For Internet Explorer and Edge (legacy) */
+  -ms-overflow-style: none;
+  /* --- END HIDE SCROLLBAR --- */
 }
 
+/* Image Styles */
 .modal-image {
   max-width: 100%;
-  max-height: 70vh; /* Limits image height to 70% of viewport height */
+  max-height: 70vh;
+  width: auto;
   border-radius: 10px;
-  object-fit: contain; /* Ensures the whole image is visible without cropping */
+  object-fit: contain;
   margin-bottom: 20px;
-  flex-shrink: 0; /* Prevent image from shrinking if content is too large */
+  flex-shrink: 0;
 }
 
-.image-details {
+/* Scrollable Container for Text Details */
+.image-details-scroll-container {
+  width: 100%;
+  flex-grow: 1;
+  max-height: calc(95vh - 70vh - (24px * 2) - 20px); /* Approximate calculation for text area height */
+  overflow-y: auto; /* Enables vertical scrolling for details */
   text-align: left;
+  padding-right: 5px; /* Add some padding so text doesn't touch the hidden scrollbar area */
+
+  /* --- HIDE SCROLLBAR FOR TEXT DETAILS SECTION --- */
+  /* For Webkit browsers (Chrome, Safari, Edge) */
+  &::-webkit-scrollbar {
+    width: 0px; /* Hide vertical scrollbar */
+    height: 0px; /* Hide horizontal scrollbar */
+  }
+  /* For Firefox */
+  scrollbar-width: none; /* Hide scrollbar in Firefox */
+  /* For Internet Explorer and Edge (legacy) */
+  -ms-overflow-style: none;
+  /* --- END HIDE SCROLLBAR --- */
+}
+
+/* Image Details Section (inside the scroll container) */
+.image-details {
   color: #444;
   font-size: 14px;
   line-height: 1.4;
   margin: 0;
   padding: 0;
-  width: 100%; /* Ensure details section takes full width */
+  width: 100%;
+  text-align: left;
 }
 
 .image-details p {
-  margin: 4px 0; /* Reduce vertical space between lines in details */
+  margin: 4px 0;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-overflow: initial;
+  text-align: left;
 }
 
+/* Close Button */
 .close-button {
   position: absolute;
-  top: 1px; /* Position relative to the modal content */
+  top: 1px;
   right: 8px;
   font-size: 30px;
   background: none;
   border: none;
-  color: black; /* White color for visibility on dark overlay */
+  color: black;
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  z-index: 10000; /* Ensure it's above everything else */
+  z-index: 10000;
 }
 
-/* Styles for the navigation buttons */
+/* Navigation Buttons */
 .nav-button {
   position: absolute;
-  top: 50%; /* Vertically center them */
-  transform: translateY(-50%); /* Adjust for perfect vertical centering */
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   padding: 10px 15px;
   font-size: 30px;
   cursor: pointer;
-  z-index: 1000; /* Ensure buttons are above the image */
-  border-radius: 50%; /* Make them circular */
+  z-index: 1000;
+  border-radius: 50%;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.3s ease; /* Smooth hover effect */
+  transition: background-color 0.3s ease;
 }
 
 .nav-button:hover {
-  background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .nav-button.prev-button {
-  left: 0px; /* Position left arrow */
+  left: 0px;
 }
 
 .nav-button.next-button {
-  right: 0px; /* Position right arrow */
+  right: 0px;
 }
 
-/* Style for disabled buttons (optional) */
+/* Disabled Button Style */
 .nav-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}