Update styless.css

styless.css

@@ -151,8 +151,7 @@ button:hover {
     border-radius: 8px;
     background-color: #f9f9f9;
 }
-
-/* Notification Bell and Dropdown Styles */
+ /* Notification Bell and Dropdown Styles */
 .notification-wrapper {
     position: fixed; /* Use fixed positioning for top-right corner */
     top: 10px; /* Position 10px from the top */
@@ -167,6 +166,7 @@ button:hover {
     font-size: 24px;
     cursor: pointer;
     padding: 10px;
+    z-index: 1001; /* Ensure the bell stays on top */
 }
 
 .notification-dot {
@@ -186,21 +186,21 @@ button:hover {
 
 .notifications-dropdown {
     display: none;
-    position: absolute;
-    top: 40px;
+    position: fixed; /* Use fixed positioning to make it full-screen */
+    top: 0;
     right: 0;
-    width: 95vw;
-    max-height: 90vh; /* Limit max height to viewport height */
+    width: 100vw; /* Take full viewport width */
+    height: 100vh; /* Take full viewport height */
     background-color: #fff;
-    border: 1px solid #ddd; 
-    border-radius: 5px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    padding: 10px;
+    border: none; /* No border for full-screen dropdown */
+    box-shadow: none; /* No shadow for clean full-screen effect */
     z-index: 1000;
-    box-sizing: border-box; /* Prevent padding from increasing the dropdown width */
-    overflow-y: auto;
+    overflow: auto; /* Allow scrolling for long content */
+    padding: 20px;
+    box-sizing: border-box;
 }
 
+/* Styling for notification items in full-screen dropdown */
 .notification-item {
     padding: 10px;
     border-bottom: 1px solid #f0f0f0;
@@ -238,3 +238,8 @@ button:hover {
 .notification-bell:hover {
     color: #007bff;
 }
+
+/* Ensure the dropdown is visible when there are new notifications */
+.new-notification .notifications-dropdown {
+    display: block;
+}