optimize display style when text is too long

src/components/mobile/PieChart.vue

@@ -28,7 +28,11 @@
                     :r="diameter / 2.5"
                     v-if="showCenterText"/>
 
-            <g class="pie-chart-text-group" v-if="showCenterText">
+            <clipPath id="pie-chart-text-clip">
+                <rect :x="-diameter / 2.5 + 2" :y="-diameter / 2.5 + 2" :width="diameter / 1.25 - 4" :height="diameter / 1.25 -4 "/>
+            </clipPath>
+
+            <g class="pie-chart-text-group" clip-path="url(#pie-chart-text-clip)" v-if="showCenterText">
                 <slot></slot>
             </g>
         </svg>
@@ -51,7 +55,7 @@
                     <p v-else-if="!validItems || !validItems.length">
                         <f7-chip outline text="---"></f7-chip>
                     </p>
-                    <f7-link :no-link-class="!enableClickItem" v-if="selectedItem" @click="clickItem(selectedItem)">
+                    <f7-link class="pie-chart-selected-item-info" :no-link-class="!enableClickItem" v-if="selectedItem" @click="clickItem(selectedItem)">
                         <span class="skeleton-text" v-if="skeleton">Name</span>
                         <span v-else-if="!skeleton && selectedItem.name">{{ selectedItem.name }}</span>
                         <span class="skeleton-text" v-if="skeleton">Value</span>
@@ -300,6 +304,11 @@ export default {
     color: var(--f7-text-color);
 }
 
+.pie-chart-selected-item-info {
+    display: inline-block;
+    text-align: center;
+}
+
 .pie-chart-background {
     fill: #f0f0f0;
 }

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -23,7 +23,7 @@
                     <f7-block slot="title" class="no-padding no-margin">
                         <div class="display-flex">
                             <f7-icon slot="media" f7="number"></f7-icon>
-                            <div class="list-item-valign-middle padding-left-half">
+                            <div class="tag-selection-list-item list-item-valign-middle padding-left-half">
                                 {{ item.name }}
                             </div>
                         </div>
@@ -164,5 +164,10 @@ export default {
         height: 400px;
     }
 }
+
+.tag-selection-list-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>
 self