From 1a33dc8cc42c0e518c8c9e3bb2e03491e0e216a3 Mon Sep 17 00:00:00 2001
From: shaw <dev@sub2api.org>
Date: Wed, 2 Sep 2026 10:40:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BC=98=E5=8C=96=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E6=A8=A1=E5=9E=8B=E5=AE=9A=E4=BB=B7=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/admin/channel/IntervalRow.vue |  8 +++++++-
 .../admin/channel/PricingEntryCard.vue           |  6 +++++-
 frontend/src/views/admin/GroupsView.vue          | 16 ++++++++--------
 .../__tests__/groupsModelsListLayout.spec.ts     |  7 +++++++
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/admin/channel/IntervalRow.vue b/frontend/src/components/admin/channel/IntervalRow.vue
index 0f83dd7f53..a8930993da 100644
--- a/frontend/src/components/admin/channel/IntervalRow.vue
+++ b/frontend/src/components/admin/channel/IntervalRow.vue
@@ -3,7 +3,7 @@
        :class="isEmpty ? 'border-red-400 bg-red-50 dark:border-red-500 dark:bg-red-950/20' : 'border-gray-200 bg-white dark:border-dark-500 dark:bg-dark-700'">
     <!-- Token mode: context range + prices ($/MTok) -->
     <template v-if="mode === 'token'">
-      <div class="grid min-w-0 flex-1 grid-cols-2 gap-2 sm:grid-cols-4 xl:grid-cols-7">
+      <div class="pricing-interval-grid grid min-w-0 flex-1 gap-2">
         <div>
           <label class="text-xs text-gray-400">{{ t('admin.channels.form.minTokens') }}</label>
           <input :value="interval.min_tokens" @input="emitField('min_tokens', toInt(($event.target as HTMLInputElement).value))"
@@ -146,3 +146,9 @@ function toIntOrNull(val: string): number | null {
   return isNaN(n) ? null : n
 }
 </script>
+
+<style scoped>
+.pricing-interval-grid {
+  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+}
+</style>
diff --git a/frontend/src/components/admin/channel/PricingEntryCard.vue b/frontend/src/components/admin/channel/PricingEntryCard.vue
index e2a9cd3236..8465887dc2 100644
--- a/frontend/src/components/admin/channel/PricingEntryCard.vue
+++ b/frontend/src/components/admin/channel/PricingEntryCard.vue
@@ -106,7 +106,7 @@
             {{ t('admin.channels.form.defaultPrices') }}
             <span class="ml-1 font-normal text-gray-400">$/MTok</span>
           </label>
-          <div class="mt-1 grid grid-cols-2 gap-2 sm:grid-cols-4 xl:grid-cols-7">
+          <div class="pricing-default-grid mt-1 grid gap-2">
             <div>
               <label class="text-xs text-gray-400">{{ t('admin.channels.form.inputPrice') }}</label>
               <input :value="entry.input_price" @input="emitField('input_price', ($event.target as HTMLInputElement).value)"
@@ -392,6 +392,10 @@ async function onModelsUpdate(newModels: string[]) {
 </script>
 
 <style scoped>
+.pricing-default-grid {
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+}
+
 .collapsible-content {
   display: grid;
   grid-template-rows: 1fr;
diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue
index e60c8768ce..a9e0e0debb 100644
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -467,7 +467,7 @@
     <BaseDialog
       :show="showCreateModal"
       :title="t('admin.groups.createGroup')"
-      width="normal"
+      width="wide"
       @close="closeCreateModal"
     >
       <form
@@ -1502,12 +1502,12 @@
 
 
         <div class="border-t border-gray-200 pt-4 mt-4 dark:border-dark-400">
-          <div class="flex items-start justify-between gap-4">
-            <div>
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div class="min-w-0 flex-1">
               <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t("admin.groups.modelPricing.title") }}</h4>
               <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t("admin.groups.modelPricing.description") }}</p>
             </div>
-            <button type="button" class="btn btn-secondary" @click="addGroupPricing(createForm.model_pricing)">
+            <button type="button" class="btn btn-secondary shrink-0 whitespace-nowrap" @click="addGroupPricing(createForm.model_pricing)">
               <Icon name="plus" size="sm" class="mr-1" />{{ t("admin.groups.modelPricing.add") }}
             </button>
           </div>
@@ -2266,7 +2266,7 @@
     <BaseDialog
       :show="showEditModal"
       :title="t('admin.groups.editGroup')"
-      width="normal"
+      width="wide"
       @close="closeEditModal"
     >
       <form
@@ -3299,12 +3299,12 @@
 
 
         <div class="border-t border-gray-200 pt-4 mt-4 dark:border-dark-400">
-          <div class="flex items-start justify-between gap-4">
-            <div>
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div class="min-w-0 flex-1">
               <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t("admin.groups.modelPricing.title") }}</h4>
               <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t("admin.groups.modelPricing.description") }}</p>
             </div>
-            <button type="button" class="btn btn-secondary" @click="addGroupPricing(editForm.model_pricing)">
+            <button type="button" class="btn btn-secondary shrink-0 whitespace-nowrap" @click="addGroupPricing(editForm.model_pricing)">
               <Icon name="plus" size="sm" class="mr-1" />{{ t("admin.groups.modelPricing.add") }}
             </button>
           </div>
diff --git a/frontend/src/views/admin/__tests__/groupsModelsListLayout.spec.ts b/frontend/src/views/admin/__tests__/groupsModelsListLayout.spec.ts
index 6ac3d7690c..20fb02af05 100644
--- a/frontend/src/views/admin/__tests__/groupsModelsListLayout.spec.ts
+++ b/frontend/src/views/admin/__tests__/groupsModelsListLayout.spec.ts
@@ -16,4 +16,11 @@ describe("groups models list layout", () => {
     expect(groupsViewSource).toContain("max-h-64 space-y-2 overflow-y-auto p-2");
     expect(groupsViewSource).not.toContain("sticky top-0");
   });
+
+  it("uses a wide dialog and keeps model pricing controls responsive", () => {
+    expect(groupsViewSource).toContain('width="wide"');
+    expect(groupsViewSource).toContain(
+      "btn btn-secondary shrink-0 whitespace-nowrap",
+    );
+  });
 });