fix(web): show full descriptions for expanded skills

Author: kuigoo

apps/web/src/styles/viewer/templates-plugins.css

@@ -1698,6 +1698,9 @@
   padding: 8px 10px 8px 14px;
   min-width: 0;
 }
+.settings-skills .skills-row-expanded .skills-row-head {
+  align-items: flex-start;
+}
 .settings-skills .skills-row-summary-btn {
   flex: 1;
   min-width: 0;
@@ -1713,6 +1716,10 @@
   color: inherit;
   font: inherit;
 }
+.settings-skills .skills-row-expanded .skills-row-summary-btn {
+  align-items: flex-start;
+  height: auto;
+}
 .settings-skills .skills-row-summary-btn:hover .skills-row-summary-name {
   color: var(--accent);
 }
@@ -1796,6 +1803,12 @@
   color: var(--text-muted);
   line-height: 1.4;
 }
+.settings-skills .skills-row-expanded .skills-row-summary-desc {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
 .settings-skills .skills-row-chevron {
   display: inline-flex;
   align-items: center;

apps/web/tests/styles/settings-polish.test.ts

@@ -55,6 +55,36 @@ describe('settings polish CSS', () => {
     expect(ruleValue(content, 'z-index')).toBe('1');
   });
 
+  it('shows the full skill description when its row is expanded', () => {
+    const collapsed = cssBlock(
+      expandedIndexCss,
+      '.settings-skills .skills-row-summary-desc',
+    );
+    const expandedHead = cssBlock(
+      expandedIndexCss,
+      '.settings-skills .skills-row-expanded .skills-row-head',
+    );
+    const expandedButton = cssBlock(
+      expandedIndexCss,
+      '.settings-skills .skills-row-expanded .skills-row-summary-btn',
+    );
+    const expanded = cssBlock(
+      expandedIndexCss,
+      '.settings-skills .skills-row-expanded .skills-row-summary-desc',
+    );
+
+    expect(ruleValue(collapsed, 'overflow')).toBe('hidden');
+    expect(ruleValue(collapsed, 'text-overflow')).toBe('ellipsis');
+    expect(ruleValue(collapsed, 'white-space')).toBe('nowrap');
+    expect(ruleValue(expandedHead, 'align-items')).toBe('flex-start');
+    expect(ruleValue(expandedButton, 'align-items')).toBe('flex-start');
+    expect(ruleValue(expandedButton, 'height')).toBe('auto');
+    expect(ruleValue(expanded, 'overflow')).toBe('visible');
+    expect(ruleValue(expanded, 'text-overflow')).toBe('clip');
+    expect(ruleValue(expanded, 'white-space')).toBe('normal');
+    expect(ruleValue(expanded, 'overflow-wrap')).toBe('anywhere');
+  });
+
   it('keeps the silent-update checkbox native-sized and aligned horizontally', () => {
     const row = cssBlock(artifactsCss, '.settings-about-diagnostics > .settings-about-toggle');
     const checkbox = cssBlock(artifactsCss, '.settings-about-toggle input');