diff --git a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
index 2b043c4..cc6453c 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -35,7 +35,6 @@
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
         color: var(--view-background-color);
         left: 1.25rem;
-        padding: 1em 1.5em;
         position: fixed;
         transform: translateY(5rem);
         transition: transform var(--gr-alert-transition-duration, 80ms) ease-out;
@@ -44,6 +43,17 @@
       :host([shown]) {
         transform: translateY(0);
       }
+      /**
+       * NOTE: To avoid style being overwritten by outside of the shadow DOM
+       * (as outside styles always win), .content-wrapper is introduced as a
+       * wrapper around main content to have better encapsulation, styles that
+       * may be affected by outside should be defined on it.
+       * In this case, `padding:0px` is defined in main.css for all elements
+       * with the universal selector: *.
+       */
+      .content-wrapper {
+        padding: 1em 1.5em;
+      }
       .text {
         color: var(--tooltip-text-color);
         display: inline-block;
@@ -62,12 +72,14 @@
         }
       }
     </style>
-    <span class="text">[[text]]</span>
-    <gr-button
-        link
-        class="action"
-        hidden$="[[_hideActionButton]]"
-        on-tap="_handleActionTap">[[actionText]]</gr-button>
+    <div class="content-wrapper">
+      <span class="text">[[text]]</span>
+      <gr-button
+          link
+          class="action"
+          hidden$="[[_hideActionButton]]"
+          on-tap="_handleActionTap">[[actionText]]</gr-button>
+    </div>
   </template>
   <script src="gr-alert.js"></script>
 </dom-module>