fix(Internationalization): Drop-down lists do not wrap and adapt to text length.

Author: dataeaseShu

frontend/src/views/chat/ChatList.vue

@@ -401,7 +401,7 @@ const handleConfirmPassword = () => {
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border-radius: 4px;
   border: 1px solid #dee0e3;
-  width: 120px !important;
+  width: fit-content !important;
   min-width: 120px !important;
   padding: 0;
   .content {
@@ -417,7 +417,7 @@ const handleConfirmPassword = () => {
     }
     .item {
       position: relative;
-      padding-left: 12px;
+      padding: 0 12px;
       height: 40px;
       display: flex;
       align-items: center;
@@ -434,7 +434,7 @@ const handleConfirmPassword = () => {
 
       &::after {
         content: '';
-        width: 112px;
+        width: calc(100% - 8px);
         height: 32px;
         border-radius: 4px;
         position: absolute;

frontend/src/views/ds/Card.vue

@@ -259,7 +259,7 @@ const onClickOutside = () => {
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border-radius: 4px;
   border: 1px solid #dee0e3;
-  width: 120px !important;
+  width: fit-content !important;
   min-width: 120px !important;
   padding: 0;
 
@@ -278,7 +278,7 @@ const onClickOutside = () => {
 
     .item {
       position: relative;
-      padding-left: 12px;
+      padding: 0 12px;
       height: 40px;
       display: flex;
       align-items: center;
@@ -297,7 +297,7 @@ const onClickOutside = () => {
 
       &::after {
         content: '';
-        width: 112px;
+        width: calc(100% - 8px);
         height: 32px;
         border-radius: 4px;
         position: absolute;

frontend/src/views/system/embedded/Card.vue

@@ -260,7 +260,7 @@ const pageLogo = computed(() => {
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border-radius: 4px;
   border: 1px solid #dee0e3;
-  width: 120px !important;
+  width: fit-content !important;
   min-width: 120px !important;
   padding: 0;
 
@@ -279,7 +279,7 @@ const pageLogo = computed(() => {
 
     .item {
       position: relative;
-      padding-left: 12px;
+      padding: 0 12px;
       height: 40px;
       display: flex;
       align-items: center;
@@ -298,7 +298,7 @@ const pageLogo = computed(() => {
 
       &::after {
         content: '';
-        width: 112px;
+        width: calc(100% - 8px);
         height: 32px;
         border-radius: 4px;
         position: absolute;

frontend/src/views/system/embedded/DsCard.vue

@@ -215,7 +215,7 @@ const handlePublic = () => {
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border-radius: 4px;
   border: 1px solid #dee0e3;
-  width: 120px !important;
+  width: fit-content !important;
   min-width: 120px !important;
   padding: 0;
   .content {
@@ -231,7 +231,7 @@ const handlePublic = () => {
     }
     .item {
       position: relative;
-      padding-left: 12px;
+      padding: 0 12px;
       height: 40px;
       display: flex;
       align-items: center;
@@ -248,7 +248,7 @@ const handlePublic = () => {
 
       &::after {
         content: '';
-        width: 112px;
+        width: calc(100% - 8px);
         height: 32px;
         border-radius: 4px;
         position: absolute;

frontend/src/views/system/workspace/index.vue

@@ -869,7 +869,7 @@ const handleCurrentChange = (val: number) => {
   box-shadow: 0px 4px 8px 0px #1f23291a;
   border-radius: 4px;
   border: 1px solid #dee0e3;
-  width: 120px !important;
+  width: fit-content !important;
   min-width: 120px !important;
   padding: 0;
   .content {
@@ -885,7 +885,7 @@ const handleCurrentChange = (val: number) => {
     }
     .item {
       position: relative;
-      padding-left: 12px;
+      padding: 0 12px;
       height: 40px;
       display: flex;
       align-items: center;
@@ -902,7 +902,7 @@ const handleCurrentChange = (val: number) => {
 
       &::after {
         content: '';
-        width: 112px;
+        width: calc(100% - 8px);
         height: 32px;
         border-radius: 4px;
         position: absolute;