From d6b14cf303ecdfb7c4d52f27febd73cb4bc0c644 Mon Sep 17 00:00:00 2001
From: Ayden <itxcc420@gmail.com>
Date: Tue, 10 Jan 2023 16:45:28 +0800
Subject: [PATCH] fix(component): [badge] fix auto width  (#11003)

* fix: badge auto width

* fix(components): [badge] remove inset-inline-end
---
 docs/examples/badge/basic.vue       | 1 +
 packages/theme-chalk/src/badge.scss | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/docs/examples/badge/basic.vue b/docs/examples/badge/basic.vue
index 647f78deba..41c13d39da 100644
--- a/docs/examples/badge/basic.vue
+++ b/docs/examples/badge/basic.vue
@@ -41,6 +41,7 @@ import { CaretBottom } from '@element-plus/icons-vue'
   margin-top: 10px;
   margin-right: 40px;
 }
+
 .el-dropdown {
   margin-top: 1.1rem;
 }
diff --git a/packages/theme-chalk/src/badge.scss b/packages/theme-chalk/src/badge.scss
index 08eb9c0429..4534b8cd73 100644
--- a/packages/theme-chalk/src/badge.scss
+++ b/packages/theme-chalk/src/badge.scss
@@ -11,6 +11,7 @@
   position: relative;
   vertical-align: middle;
   display: inline-block;
+  width: fit-content;
 
   @include e(content) {
     background-color: getCssVar('badge', 'bg-color');
@@ -32,6 +33,7 @@
       top: 0;
       right: calc(1px + #{getCssVar('badge', 'size')} / 2);
       transform: translateY(-50%) translateX(100%);
+      z-index: getCssVar('index', 'normal');
 
       @include when(dot) {
         right: 5px;