feat: add help modal topic titles and improve layout

- Add titles for About, Plugin Guide, Troubleshooting, and Privacy sections
- Limit topic sidebar width to 150px with text truncation for long labels
- Apply ellipsis overflow handling to prevent layout breaking
This commit is contained in:
Andrew Beal 2025-11-08 13:48:39 +00:00
parent 9cb74f6f2f
commit edaa647b9e
2 changed files with 9 additions and 4 deletions

View file

@ -27,16 +27,16 @@ export enum Copy {
GPT_4_1_Mini = "GPT-4.1 Mini",
GPT_4_1_Nano = "GPT-4.1 Nano",
HelpModalAboutTitle = "",
HelpModalAboutTitle = "About",
HelpModalAboutContent = "",
HelpModalGuideTitle = "",
HelpModalGuideTitle = "Plugin Guide",
HelpModalGuideContent = "",
HelpModalTroubleshootTitle = "",
HelpModalTroubleshootTitle = "Troubleshooting",
HelpModalTroubleshootContent = "",
HelpModalPrivacyTitle = "",
HelpModalPrivacyTitle = "Privacy",
HelpModalPrivacyContent = "",
EXAMPLE_USER_INSTRUCTION = `### TL;DR

View file

@ -224,12 +224,17 @@
grid-row: 1 / 9;
grid-column: 1;
display: grid;
max-width: 150px;
grid-template-rows: auto var(--size-4-3) auto var(--size-4-3) auto var(--size-4-3) auto 1fr;
grid-template-columns: auto var(--size-4-2) 1fr;
}
.help-modal-topic-item {
grid-column: 1;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: var(--size-4-1) var(--size-4-3);
cursor: pointer;
transition: color 0.15s ease-in-out;