style: tag tooltip content width

9 months ago · b167170aa9
parent 642ac3ebc4
commit b167170aa9
6 changed files with 15 additions and 12 deletions
--- a/src/components/status-tag/index.tsx
+++ b/src/components/status-tag/index.tsx
@ -29,6 +29,7 @@ type StatusTagProps = {
  download?: {
    percent: number;
  };
+  maxTooltipWidth?: number;
  extra?: React.ReactNode;
  actions?: {
    label: string;
@ -44,6 +45,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
  download,
  extra,
  actions = [],
+  maxTooltipWidth = 250,
  type = 'tag'
 }) => {
  const { text, status } = statusValue;
@ -118,7 +120,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
        <div
          style={{
            width: 'max-content',
-            maxWidth: 250,
+            maxWidth: maxTooltipWidth,
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word'
          }}
--- a/src/global.less
+++ b/src/global.less
@ -72,7 +72,7 @@ html {
  --color-green-fill-light: rgb(243 251 248);
  --ant-rate-star-color: #fadb14;
  --color-fill-spin-bg: rgba(255, 255, 255, 15%);
-  --width-tooltip-max: 300px;
+  --width-tooltip-max: 420px;
  --color-bg-tooltip: '#fff';
  --color-modal-content-bg: rgba(255, 255, 255, 90%);
  --color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
--- a/src/locales/en-US/resources.ts
+++ b/src/locales/en-US/resources.ts
@ -74,7 +74,7 @@ export default {
  'resources.modelfiles.copy.tips': 'Copy Full Path',
  'resources.filter.path': 'Filter by path',
  'resources.register.worker.step1':
-    'Click the <span class="bold-text">Copy the token</span> menu.',
+    'Click the <span class="bold-text">Copy token</span> menu.',
  'resources.register.worker.step2':
    'Click the <span class="bold-text">Quick Config</span> menu.',
  'resources.register.worker.step3':
@ -82,7 +82,7 @@ export default {
  'resources.register.worker.step4':
    'Select <span class="bold-text">Worker</span> as the service role.',
  'resources.register.worker.step5':
-    'Enter the <span="bold-text">Server URL</span>.',
+    'Enter the <span class="bold-text">Server URL</span>.',
  'resources.register.worker.step6':
    'Paste the <span class="bold-text">Token</span>.',
  'resources.register.worker.step7':
--- a/src/locales/ja-JP/resources.ts
+++ b/src/locales/ja-JP/resources.ts
@ -75,7 +75,7 @@ export default {
  'resources.modelfiles.copy.tips': 'フルパスをコピー',
  'resources.filter.path': 'パスでフィルタ',
  'resources.register.worker.step1':
-    'Click the <span class="bold-text">Copy the token</span> menu.',
+    'Click the <span class="bold-text">Copy token</span> menu.',
  'resources.register.worker.step2':
    'Click the <span class="bold-text">Quick Config</span> menu.',
  'resources.register.worker.step3':
@ -83,7 +83,7 @@ export default {
  'resources.register.worker.step4':
    'Select <span class="bold-text">Worker</span> as the service role.',
  'resources.register.worker.step5':
-    'Enter the <span="bold-text">Server URL</span>.',
+    'Enter the <span class="bold-text">Server URL</span>.',
  'resources.register.worker.step6':
    'Paste the <span class="bold-text">Token</span>.',
  'resources.register.worker.step7':
@ -93,11 +93,11 @@ export default {
 };

 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1. 'resources.register.worker.step1': 'Click the <span class="bold-text">Copy the token</span> menu.',
+// 1. 'resources.register.worker.step1': 'Click the <span class="bold-text">Copy token</span> menu.',
 // 2. 'resources.register.worker.step2': 'Click the <span class="bold-text">Quick Config</span> menu.',
 // 3. 'resources.register.worker.step3': 'Click the <span class="bold-text">General</span> tab.',
 // 4. 'resources.register.worker.step4':  'Select <span class="bold-text">Worker</span> as the service role.',
-// 5. 'resources.register.worker.step5': 'Enter the <span="bold-text">Server URL</span>.',
+// 5. 'resources.register.worker.step5': 'Enter the <span class="bold-text">Server URL</span>.',
 // 6. 'resources.register.worker.step6': 'Paste the <span class="bold-text">Token</span>.',
 // 7. 'resources.register.worker.step7': 'Click <span class="bold-text">Restart</span> to apply the settings.',
 // 8. 'resources.register.install.title': 'Install GPUStack',
--- a/src/locales/ru-RU/resources.ts
+++ b/src/locales/ru-RU/resources.ts
@ -73,7 +73,7 @@ export default {
  'resources.modelfiles.copy.tips': 'Скопировать полный путь',
  'resources.filter.path': 'Фильтрация по пути',
  'resources.register.worker.step1':
-    'Click the <span class="bold-text">Copy the token</span> menu.',
+    'Click the <span class="bold-text">Copy token</span> menu.',
  'resources.register.worker.step2':
    'Click the <span class="bold-text">Quick Config</span> menu.',
  'resources.register.worker.step3':
@ -81,7 +81,7 @@ export default {
  'resources.register.worker.step4':
    'Select <span class="bold-text">Worker</span> as the service role.',
  'resources.register.worker.step5':
-    'Enter the <span="bold-text">Server URL</span>.',
+    'Enter the <span class="bold-text">Server URL</span>.',
  'resources.register.worker.step6':
    'Paste the <span class="bold-text">Token</span>.',
  'resources.register.worker.step7':
@ -91,11 +91,11 @@ export default {
 };

 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1. 'resources.register.worker.step1': 'Click the <span class="bold-text">Copy the token</span> menu.',
+// 1. 'resources.register.worker.step1': 'Click the <span class="bold-text">Copy token</span> menu.',
 // 2. 'resources.register.worker.step2': 'Click the <span class="bold-text">Quick Config</span> menu.',
 // 3. 'resources.register.worker.step3': 'Click the <span class="bold-text">General</span> tab.',
 // 4. 'resources.register.worker.step4':  'Select <span class="bold-text">Worker</span> as the service role.',
-// 5. 'resources.register.worker.step5': 'Enter the <span="bold-text">Server URL</span>.',
+// 5. 'resources.register.worker.step5': 'Enter the <span class="bold-text">Server URL</span>.',
 // 6. 'resources.register.worker.step6': 'Paste the <span class="bold-text">Token</span>.',
 // 7. 'resources.register.worker.step7': 'Click <span class="bold-text">Restart</span> to apply the settings.',
 // 8. 'resources.register.install.title': 'Install GPUStack',
--- a/src/pages/resources/components/workers.tsx
+++ b/src/pages/resources/components/workers.tsx
@ -283,6 +283,7 @@ const Workers: React.FC = () => {
            render={(text, record: ListItem) => {
              return (
                <StatusTag
+                  maxTooltipWidth={400}
                  statusValue={{
                    status: status[record.state] as any,
                    text: WorkerStatusMapValue[record.state],