diff --git a/src/miniapp-market-web/src/App.tsx b/src/miniapp-market-web/src/App.tsx
index 0795c1c268..23ccd75923 100644
--- a/src/miniapp-market-web/src/App.tsx
+++ b/src/miniapp-market-web/src/App.tsx
@@ -837,7 +837,7 @@ function DetailPage({
                 icon={<Star size={18} fill={value <= (app.myRating || 0) ? 'currentColor' : 'none'} />}
               />
             ))}
-            <span>{app.ratingAverage.toFixed(1)} ({app.ratingCount})</span>
+            <span className="rating-summary">{app.ratingAverage.toFixed(1)} ({app.ratingCount})</span>
           </div>
         </div>
         <div className="detail-gallery">
diff --git a/src/miniapp-market-web/src/styles.css b/src/miniapp-market-web/src/styles.css
index 3e43dc6007..b3069a3f75 100644
--- a/src/miniapp-market-web/src/styles.css
+++ b/src/miniapp-market-web/src/styles.css
@@ -1311,8 +1311,8 @@ main {
   color: var(--openbitfun-color-status-warning-content);
 }
 
-.rating-control span {
-  margin-left: 7px;
+.rating-summary {
+  margin-inline-start: 7px;
   color: var(--openbitfun-color-content-muted);
   font-size: 11.5px;
   font-variant-numeric: tabular-nums;
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
index 987c032ac6..6f0815cf1b 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
@@ -117,30 +117,30 @@
     padding: var(--openbitfun-space-2) var(--openbitfun-space-3);
     border-bottom: 1px solid var(--openbitfun-color-border-subtle);
     background: var(--openbitfun-color-surface-panel);
+  }
 
-    span,
-    small {
-      display: block;
-    }
+  &__preview-stage-title,
+  &__preview-stage-hint {
+    display: block;
+  }
 
-    span {
-      color: var(--openbitfun-color-content-primary);
-      font-family: var(--openbitfun-type-heading-card-font-family);
-      font-size: var(--openbitfun-type-heading-card-font-size);
-      font-weight: var(--openbitfun-type-heading-card-font-weight);
-      line-height: var(--openbitfun-type-heading-card-line-height);
-      letter-spacing: var(--openbitfun-type-heading-card-letter-spacing);
-    }
+  &__preview-stage-title {
+    color: var(--openbitfun-color-content-primary);
+    font-family: var(--openbitfun-type-heading-card-font-family);
+    font-size: var(--openbitfun-type-heading-card-font-size);
+    font-weight: var(--openbitfun-type-heading-card-font-weight);
+    line-height: var(--openbitfun-type-heading-card-line-height);
+    letter-spacing: var(--openbitfun-type-heading-card-letter-spacing);
+  }
 
-    small {
-      margin-top: 2px;
-      color: var(--openbitfun-color-content-muted);
-      font-family: var(--openbitfun-type-support-font-family);
-      font-size: var(--openbitfun-type-support-font-size);
-      font-weight: var(--openbitfun-type-support-font-weight);
-      line-height: var(--openbitfun-type-support-line-height);
-      letter-spacing: var(--openbitfun-type-support-letter-spacing);
-    }
+  &__preview-stage-hint {
+    margin-top: 2px;
+    color: var(--openbitfun-color-content-muted);
+    font-family: var(--openbitfun-type-support-font-family);
+    font-size: var(--openbitfun-type-support-font-size);
+    font-weight: var(--openbitfun-type-support-font-weight);
+    line-height: var(--openbitfun-type-support-line-height);
+    letter-spacing: var(--openbitfun-type-support-letter-spacing);
   }
 
   &__preview-stage-body {
@@ -277,20 +277,17 @@
       line-height: var(--openbitfun-type-heading-section-line-height);
       letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
     }
+  }
 
-    span:not([data-overflow-content]) {
-      display: block;
-      margin-top: 2px;
-      color: var(--openbitfun-color-content-muted);
-      font-family: var(--openbitfun-type-support-font-family);
-      font-size: var(--openbitfun-type-support-font-size);
-      font-weight: var(--openbitfun-type-support-font-weight);
-      line-height: var(--openbitfun-type-support-line-height);
-      letter-spacing: var(--openbitfun-type-support-letter-spacing);
-      overflow: hidden;
-      white-space: nowrap;
-      max-width: 360px;
-    }
+  &__app-name {
+    margin-top: 2px;
+    color: var(--openbitfun-color-content-muted);
+    font-family: var(--openbitfun-type-support-font-family);
+    font-size: var(--openbitfun-type-support-font-size);
+    font-weight: var(--openbitfun-type-support-font-weight);
+    line-height: var(--openbitfun-type-support-line-height);
+    letter-spacing: var(--openbitfun-type-support-letter-spacing);
+    max-width: 360px;
   }
 
   &__notice {
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx
index e92819ed10..8601e7bcc2 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.tsx
@@ -231,8 +231,8 @@ const MiniAppScene: React.FC<MiniAppSceneProps> = ({ appId }) => {
               <div className="miniapp-scene__preview-stage" role="region" aria-label={t('customize.previewTitle')} data-openbitfun-scene="miniapp" data-openbitfun-part="preview">
                 <div className="miniapp-scene__preview-stage-header">
                   <div>
-                    <span>{t('customize.previewTitle')}</span>
-                    <small>{t('customize.previewHint')}</small>
+                    <span className="miniapp-scene__preview-stage-title">{t('customize.previewTitle')}</span>
+                    <small className="miniapp-scene__preview-stage-hint">{t('customize.previewHint')}</small>
                   </div>
                   <Tooltip content={t('customize.hidePreview')}>
                     <IconButton
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss b/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss
index de82f2dc54..e008182186 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss
@@ -233,19 +233,15 @@
       letter-spacing: var(--openbitfun-type-heading-card-letter-spacing);
       white-space: nowrap;
     }
+  }
 
-    span {
-      display: -webkit-box;
-      overflow: hidden;
-      color: var(--openbitfun-color-content-muted);
-      font-family: var(--openbitfun-type-support-font-family);
-      font-size: var(--openbitfun-type-support-font-size);
-      font-weight: var(--openbitfun-type-support-font-weight);
-      line-height: var(--openbitfun-type-support-line-height);
-      letter-spacing: var(--openbitfun-type-support-letter-spacing);
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-    }
+  &__highlight-description {
+    color: var(--openbitfun-color-content-muted);
+    font-family: var(--openbitfun-type-support-font-family);
+    font-size: var(--openbitfun-type-support-font-size);
+    font-weight: var(--openbitfun-type-support-font-weight);
+    line-height: var(--openbitfun-type-support-line-height);
+    letter-spacing: var(--openbitfun-type-support-letter-spacing);
   }
 
   &__footer {
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.tsx b/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.tsx
index 5af1445bd1..c2a82dfe39 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.tsx
@@ -265,7 +265,9 @@ const MiniAppDetailModal: React.FC<MiniAppDetailModalProps> = ({
                   </span>
                   <span className="miniapp-detail-modal__highlight-copy">
                     <strong><OverflowText>{copy.title}</OverflowText></strong>
-                    <OverflowText lines={2}>{copy.description}</OverflowText>
+                    <OverflowText className="miniapp-detail-modal__highlight-description" lines={2}>
+                      {copy.description}
+                    </OverflowText>
                   </span>
                 </div>
               );
diff --git a/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx b/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx
index db021ea8f1..f262061790 100644
--- a/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/customization/MiniAppCustomizePanel.tsx
@@ -412,7 +412,7 @@ export const MiniAppCustomizePanel: React.FC<MiniAppCustomizePanelProps> = ({
       <div className="miniapp-customize-panel__header" data-openbitfun-component="miniapp-customize-panel" data-openbitfun-part="header">
         <div>
           <h3>{t('customize.title')}</h3>
-          <OverflowText>{appName}</OverflowText>
+          <OverflowText className="miniapp-customize-panel__app-name">{appName}</OverflowText>
         </div>
         <Tooltip content={t('customize.close')} disabled={busy}>
           <IconButton
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss
index 537a2da407..4cad436a0d 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.scss
@@ -413,7 +413,7 @@
       color: var(--openbitfun-color-status-warning-content);
     }
 
-    span {
+    &-summary {
       margin-inline-start: var(--openbitfun-space-2);
       color: var(--openbitfun-color-content-muted);
       font-family: var(--openbitfun-type-meta-font-family);
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
index 8fdc4f2bd0..80c78ff8dd 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppLibraryView.tsx
@@ -1060,7 +1060,9 @@ const MiniAppLibraryContent: React.FC<MiniAppLibraryViewProps> = ({ tabs }) => {
                     icon={<Icon name="star" size="lg" />}
                   />
                 ))}
-                <span>{detail.ratingAverage.toFixed(1)} · {formatNumber(detail.ratingCount)}</span>
+                <span className="miniapp-market-detail__rating-summary">
+                  {detail.ratingAverage.toFixed(1)} · {formatNumber(detail.ratingCount)}
+                </span>
               </div>
             </section>
             <section>
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss
index 799e5539b5..18adc363ea 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss
@@ -245,8 +245,8 @@
       color: var(--openbitfun-color-status-warning-content);
     }
 
-    span {
-      margin-left: var(--openbitfun-space-2);
+    &-summary {
+      margin-inline-start: var(--openbitfun-space-2);
       color: var(--openbitfun-color-content-muted);
       font-family: var(--openbitfun-type-meta-font-family);
       font-size: var(--openbitfun-type-meta-font-size);
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
index 804ac3c4d0..2b1f14ec2d 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
@@ -542,7 +542,9 @@ const MiniAppMarketView: React.FC<MiniAppMarketViewProps> = ({ tabs }) => {
                     icon={<Icon name="star" size="lg" />}
                   />
                 ))}
-                <span>{detail.ratingAverage.toFixed(1)} · {formatNumber(detail.ratingCount)}</span>
+                <span className="miniapp-market-detail__rating-summary">
+                  {detail.ratingAverage.toFixed(1)} · {formatNumber(detail.ratingCount)}
+                </span>
               </div>
             </section>
             <section>