fix: Adjust LogsRenderer styling and add container class

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.8-beta-12",
+    "version": "0.1.8-beta-13",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,50 +1,52 @@
-.logs-renderer {
-    &__search-bar {
-        .search-bar {
-            background: transparent;
-            border-radius: 0px;
-            border: none !important;
-
-            input {
-                color: var(--N0);
-
-                &::placeholder {
-                    color: var(--N500);
+.logs-renderer-container {
+    .logs-renderer {
+        &__search-bar {
+            .search-bar {
+                background: transparent;
+                border-radius: 0px;
+                border: none !important;
+    
+                input {
+                    color: var(--N0);
+    
+                    &::placeholder {
+                        color: var(--N500);
+                    }
+                }
+    
+                &:hover {
+                    border: none !important;
+                    background: transparent;
                 }
             }
-
-            &:hover {
+    
+            .search-bar:focus-within {
                 border: none !important;
-                background: transparent;
             }
         }
-
-        .search-bar:focus-within {
-            border: none !important;
-        }
-    }
-
-    &__stage-accordion {
-        background-color: #0C1021;
-
-        &:not(&--open-stage):hover {
-            background-color: rgba(44, 51, 84, 0.5);
+    
+        &__stage-accordion {
+            background-color: #0C1021;
+    
+            &:not(&--open-stage):hover {
+                background-color: rgba(44, 51, 84, 0.5);
+            }
+    
+            &--open-stage {
+                background-color: #2C3354;
+            }
+            
         }
-
-        &--open-stage {
-            background-color: #2C3354;
+    
+        &__log-item {
+            grid-template-columns: 34px auto;
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
         }
-        
-    }
-
-    &__log-item {
-        grid-template-columns: 34px auto;
-        &:hover {
-            background-color: rgba(255, 255, 255, 0.1);
+    
+        &__filters-border-bottom {
+            border-bottom: 1px solid #2C3354;
         }
     }
-
-    &__filters-border-bottom {
-        border-bottom: 1px solid #2C3354;
-    }
 }

src/Shared/Components/CICDHistory/LogsRenderer.scss

@@ -389,7 +389,7 @@ export const LogsRenderer = ({
         if (areStagesAvailable) {
             return (
                 <div
-                    className="flexbox-col pb-20"
+                    className="flexbox-col pb-20 logs-renderer-container"
                     data-testid="check-logs-detail"
                     style={{
                         backgroundColor: '#0C1021',