obsidian-plugin/logancyang_obsidian-copilot
1
0
Fork 0
mirror of https://github.com/logancyang/obsidian-copilot.git synced 2026-07-22 07:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(settings): restore version chip + reset button hidden by Obsidian h1 CSS (#2445)

Browse source 
* fix(settings): restore version chip + reset button hidden by Obsidian h1 CSS

The top-of-settings row (Copilot Settings title, version chip, "(up to
date)" annotation, Reset Settings button) is rendered but invisible in
current Obsidian releases. DOM inspection confirms the <h1> wrapping
the row has `display: none` applied with `height: 0`:

  h1Texts: ["Copilot Settingsv3.3.0 (up to date)Reset Settings"]
  h1Styles: [{ display: "none", height: 0, visibility: "visible" }]

Cause: Obsidian's settings modal CSS hides plugin-rendered <h1> elements
because Obsidian reserves the top-level heading slot in a settings tab
for itself. This convention was tightened in a recent Obsidian release,
so the same code that worked at <h1>'s introduction (PR #1194) and
update-notification addition (PR #1415) now silently renders zero-height.

Fix: replace the <h1> with a <div role="heading" aria-level={1}> that
carries the same heading-style classes (tw-text-2xl tw-font-bold) plus
the existing flex/layout classes. The accessibility role/level preserves
the heading semantic for screen readers without triggering Obsidian's
display:none on real <h1>. The small-text version chip is now explicitly
tw-font-normal so it doesn't inherit the wrapper's tw-font-bold.

Verified by DOM diagnostic in live Obsidian: <h1> was being hidden;
<div role="heading"> is not affected by the same CSS rule.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(settings): shrink restored heading and add spacing below

Per request: make the restored title row much smaller (tw-text-2xl
tw-font-bold → tw-text-base tw-font-semibold) and add tw-mb-4 spacing
below it so it sits comfortably above the tabs row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Logan Yang 2026-05-13 23:52:20 -07:00 committed by GitHub
parent 1203a4dc84
commit dd74cf9654
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/settings/v2/SettingsMainV2.tsx
View file

@ -98,12 +98,21 @@ const SettingsMainV2: React.FC<SettingsMainV2Props> = ({ plugin }) => {
return (
<TabProvider>
<div>
<div className="tw-flex tw-flex-col tw-gap-2">
<h1 className="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-center sm:tw-justify-between">
<div className="tw-mb-4 tw-flex tw-flex-col tw-gap-2">
{/* Reason: Obsidian's settings modal CSS hides plugin-rendered <h1>
elements (display: none) because Obsidian reserves the top-level
heading for itself. Use a div with heading-equivalent styling. */}
<div
role="heading"
aria-level={1}
className="tw-flex tw-flex-col tw-gap-2 tw-text-base tw-font-semibold sm:tw-flex-row sm:tw-items-center sm:tw-justify-between"
>
<div className="tw-flex tw-items-center tw-gap-2">
<span>Copilot Settings</span>
<div className="tw-flex tw-items-center tw-gap-1">
<span className="tw-text-xs tw-text-muted">v{plugin.manifest.version}</span>
<span className="tw-text-xs tw-font-normal tw-text-muted">
v{plugin.manifest.version}
</span>
{latestVersion && (
<>
{hasUpdate ? (
@ -111,12 +120,15 @@ const SettingsMainV2: React.FC<SettingsMainV2Props> = ({ plugin }) => {
href="obsidian://show-plugin?id=copilot"
target="_blank"
rel="noopener noreferrer"
className="tw-text-xs tw-text-accent hover:tw-underline"
className="tw-text-xs tw-font-normal tw-text-accent hover:tw-underline"
>
(Update to v{latestVersion})
</a>
) : (
<span className="tw-text-xs tw-text-normal"> (up to date)</span>
<span className="tw-text-xs tw-font-normal tw-text-normal">
{" "}
(up to date)
</span>
)}
</>
)}
@ -127,7 +139,7 @@ const SettingsMainV2: React.FC<SettingsMainV2Props> = ({ plugin }) => {
Reset Settings
</Button>
</div>
</h1>
</div>
</div>
{/* Add the key prop to force re-render */}
<SettingsContent key={resetKey} />