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,6 +282,7 @@ export function HighlightTab(): React.JSX.Element {
         message={t('settings.highlight.alert')}
       />
       <div className="hl-toolbar">
+        <div className="hl-toolbar-controls">
           <Tooltip title={t('settings.highlight.modeDesc')}>
             <span className="hl-master">
               <span className="hl-editor-sub-label">{t('settings.highlight.mode')}</span>
@@ -332,6 +333,8 @@ export function HighlightTab(): React.JSX.Element {
               <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')}
@@ -346,6 +349,7 @@ export function HighlightTab(): React.JSX.Element {
             {t('settings.highlight.addRule')}
           </Button>
         </div>
+      </div>
       <HighlightImportExport open={ioOpen} onClose={() => setIoOpen(false)} />
       <HighlightProfiles />
       <div className={highlightMode === 'off' ? 'hl-table hl-table-off' : 'hl-table'}>

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;
 }