fix(highlight): settings toolbar squeezed labels into vertical text

.hl-master carried margin-right:auto to push the buttons right when the
toolbar held a single control; with four it flex-shrank each one and the
captions wrapped one character per line. Group the toolbar into a controls
cluster and a right-aligned actions cluster (margin-left:auto so the buttons
stay on the right edge on the line they wrap onto), let .hl-master never
shrink or wrap, box the per-host profile section in its own bordered card
with a left-aligned hint, and drop the fixed 56px editor label width that
broke "包含的规则" onto two lines.

src/renderer/src/settings/HighlightTab.tsx

@@ -282,69 +282,73 @@ export function HighlightTab(): React.JSX.Element {
         message={t('settings.highlight.alert')}
       />
       <div className="hl-toolbar">
-        <Tooltip title={t('settings.highlight.modeDesc')}>
+        <div className="hl-toolbar-controls">
-          <span className="hl-master">
+          <Tooltip title={t('settings.highlight.modeDesc')}>
-            <span className="hl-editor-sub-label">{t('settings.highlight.mode')}</span>
+            <span className="hl-master">
-            <Segmented
+              <span className="hl-editor-sub-label">{t('settings.highlight.mode')}</span>
-              size="small"
+              <Segmented
-              value={highlightMode}
+                size="small"
-              onChange={(value) => void updateTerminal({ highlightMode: value as HighlightMode })}
+                value={highlightMode}
-              options={[
+                onChange={(value) => void updateTerminal({ highlightMode: value as HighlightMode })}
-                { value: 'all', label: t('settings.highlight.modeAll') },
+                options={[
-                { value: 'basic', label: t('settings.highlight.modeBasic') },
+                  { value: 'all', label: t('settings.highlight.modeAll') },
-                { value: 'off', label: t('settings.highlight.modeOff') }
+                  { value: 'basic', label: t('settings.highlight.modeBasic') },
-              ]}
+                  { value: 'off', label: t('settings.highlight.modeOff') }
-            />
+                ]}
-          </span>
+              />
-        </Tooltip>
+            </span>
-        <Tooltip title={t('settings.highlight.groupByCategory')}>
+          </Tooltip>
-          <span className="hl-master">
+          <Tooltip title={t('settings.highlight.groupByCategory')}>
-            <Switch
+            <span className="hl-master">
-              size="small"
+              <Switch
-              checked={groupByCategory}
+                size="small"
-              onChange={(checked) => void updateTerminal({ highlightGroupByCategory: checked })}
+                checked={groupByCategory}
-            />
+                onChange={(checked) => void updateTerminal({ highlightGroupByCategory: checked })}
-            <span className="hl-editor-sub-label">{t('settings.highlight.groupByCategory')}</span>
+              />
-          </span>
+              <span className="hl-editor-sub-label">{t('settings.highlight.groupByCategory')}</span>
-        </Tooltip>
+            </span>
-        <Tooltip title={t('settings.highlight.statsHint')}>
+          </Tooltip>
-          <span className="hl-master">
+          <Tooltip title={t('settings.highlight.statsHint')}>
-            <Switch
+            <span className="hl-master">
-              size="small"
+              <Switch
-              checked={statsOn}
+                size="small"
-              onChange={(checked) => void updateTerminal({ highlightStats: checked })}
+                checked={statsOn}
-            />
+                onChange={(checked) => void updateTerminal({ highlightStats: checked })}
-            <span className="hl-editor-sub-label">{t('settings.highlight.stats')}</span>
+              />
-          </span>
+              <span className="hl-editor-sub-label">{t('settings.highlight.stats')}</span>
-        </Tooltip>
+            </span>
-        {statsOn && (
+          </Tooltip>
-          <Button size="small" onClick={() => resetHighlightStats()}>
+          {statsOn && (
-            {t('settings.highlight.statsReset')}
+            <Button size="small" onClick={() => resetHighlightStats()}>
+              {t('settings.highlight.statsReset')}
+            </Button>
+          )}
+          <Tooltip title={t('settings.highlight.themeColorsHint')}>
+            <span className="hl-master">
+              <Switch
+                size="small"
+                checked={themeColorsOn}
+                onChange={(checked) => void updateTerminal({ highlightThemeColors: checked })}
+              />
+              <span className="hl-editor-sub-label">{t('settings.highlight.themeColors')}</span>
+            </span>
+          </Tooltip>
+        </div>
+        <div className="hl-toolbar-actions">
+          <Button onClick={() => setIoOpen(true)}>{t('settings.highlight.importExport')}</Button>
+          <Popconfirm
+            title={t('settings.highlight.resetTitle')}
+            description={t('settings.highlight.resetDesc')}
+            okText={t('settings.highlight.resetOk')}
+            cancelText={t('common.cancel')}
+            onConfirm={() => void handleReset()}
+          >
+            <Button>{t('common.reset')}</Button>
+          </Popconfirm>
+          <Button type="primary" onClick={openCreate}>
+            {t('settings.highlight.addRule')}
           </Button>
-        )}
+        </div>
-        <Tooltip title={t('settings.highlight.themeColorsHint')}>
-          <span className="hl-master">
-            <Switch
-              size="small"
-              checked={themeColorsOn}
-              onChange={(checked) => void updateTerminal({ highlightThemeColors: checked })}
-            />
-            <span className="hl-editor-sub-label">{t('settings.highlight.themeColors')}</span>
-          </span>
-        </Tooltip>
-        <Button onClick={() => setIoOpen(true)}>{t('settings.highlight.importExport')}</Button>
-        <Popconfirm
-          title={t('settings.highlight.resetTitle')}
-          description={t('settings.highlight.resetDesc')}
-          okText={t('settings.highlight.resetOk')}
-          cancelText={t('common.cancel')}
-          onConfirm={() => void handleReset()}
-        >
-          <Button>{t('common.reset')}</Button>
-        </Popconfirm>
-        <Button type="primary" onClick={openCreate}>
-          {t('settings.highlight.addRule')}
-        </Button>
       </div>
       <HighlightImportExport open={ioOpen} onClose={() => setIoOpen(false)} />
       <HighlightProfiles />

src/renderer/src/settings/highlight.css

@@ -14,11 +14,32 @@
 
 .hl-toolbar {
   display: flex;
-  justify-content: flex-end;
+  flex-wrap: wrap;
+  justify-content: flex-start;
   gap: 8px;
   align-items: center;
 }
 
+/* Left group (the switches) and right group (the buttons) each wrap on their
+   own, so a narrow settings pane never squeezes a label into vertical text. */
+.hl-toolbar-controls,
+.hl-toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.hl-toolbar-controls {
+  min-width: 0;
+}
+
+/* `margin-left: auto` rather than `justify-content: space-between`: the buttons
+   stay against the right edge even on the line they wrap onto. */
+.hl-toolbar-actions {
+  margin-left: auto;
+}
+
 .hl-table .ant-table {
   background: transparent;
 }
@@ -109,12 +130,14 @@
   min-width: 74px;
 }
 
-/* master switch sits on the left of the toolbar */
+/* A switch plus its caption. Never shrinks and never wraps: the caption is a
+   single word in some languages and a four-character phrase in others. */
 .hl-master {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-right: auto;
+  flex: none;
+  white-space: nowrap;
   cursor: help;
 }
 
@@ -142,6 +165,15 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--chrome-border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--chrome-fg, #cccccc) 2%, transparent);
+}
+
+/* the shared hint class centres itself; under this header it reads as stray text */
+.hl-profiles > .hl-editor-hint {
+  align-self: flex-start;
 }
 
 .hl-profiles-head {
@@ -233,7 +265,10 @@
 }
 
 .hl-editor-label {
-  flex: 0 0 56px;
+  /* a fixed width forced longer captions ("包含的规则") onto two lines */
+  flex: 0 0 auto;
+  min-width: 56px;
+  white-space: nowrap;
   color: color-mix(in srgb, var(--chrome-fg, #cccccc) 88%, transparent);
   padding-top: 5px;
 }