diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk
index 0a6fe40a1..5e8d0af79 100644
--- a/packages/webawesome/docs/_includes/base.njk
+++ b/packages/webawesome/docs/_includes/base.njk
@@ -44,7 +44,7 @@
   </head>
   <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
+    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1180">
       <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">
diff --git a/packages/webawesome/src/components/tag/tag.css b/packages/webawesome/src/components/tag/tag.css
index 3fdabab5b..2775dcc91 100644
--- a/packages/webawesome/src/components/tag/tag.css
+++ b/packages/webawesome/src/components/tag/tag.css
@@ -1,21 +1,23 @@
-:host {
-  display: inline-flex;
-  gap: 0.5em;
-  border-radius: var(--wa-border-radius-m);
-  align-items: center;
-  background-color: var(--background-color, var(--wa-color-fill-quiet));
-  border-color: var(--border-color, transparent);
-  border-style: var(--wa-border-style);
-  border-width: var(--wa-border-width-s);
-  color: var(--text-color, var(--wa-color-on-normal));
-  font-size: inherit;
-  line-height: 1;
-  white-space: nowrap;
-  user-select: none;
-  -webkit-user-select: none;
-  height: calc(var(--wa-form-control-height) * 0.8);
-  line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
-  padding: 0 0.75em;
+@layer wa-component {
+  :host {
+    display: inline-flex;
+    gap: 0.5em;
+    border-radius: var(--wa-border-radius-m);
+    align-items: center;
+    background-color: var(--background-color, var(--wa-color-fill-quiet));
+    border-color: var(--border-color, transparent);
+    border-style: var(--wa-border-style);
+    border-width: var(--wa-border-width-s);
+    color: var(--text-color, var(--wa-color-on-normal));
+    font-size: inherit;
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    height: calc(var(--wa-form-control-height) * 0.8);
+    line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
+    padding: 0 0.75em;
+  }
 }
 
 .content {
diff --git a/packages/webawesome/src/components/tag/tag.ts b/packages/webawesome/src/components/tag/tag.ts
index 3ea2fdf0b..849b3c92c 100644
--- a/packages/webawesome/src/components/tag/tag.ts
+++ b/packages/webawesome/src/components/tag/tag.ts
@@ -28,7 +28,7 @@ import styles from './tag.css';
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {
-  static css = [sizeStyles, variantStyles, appearanceStyles, styles];
+  static css = [styles, variantStyles, sizeStyles, appearanceStyles];
 
   private readonly localize = new LocalizeController(this);
 
