From dd74cf9654bcf9d4e87ccd6c11072c5f7ffc888f Mon Sep 17 00:00:00 2001
From: Logan Yang <logancyang@gmail.com>
Date: Wed, 13 May 2026 23:52:20 -0700
Subject: [PATCH] fix(settings): restore version chip + reset button hidden by
 Obsidian h1 CSS (#2445)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 src/settings/v2/SettingsMainV2.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/settings/v2/SettingsMainV2.tsx b/src/settings/v2/SettingsMainV2.tsx
index c1d3c1a9..e18303e0 100644
--- a/src/settings/v2/SettingsMainV2.tsx
+++ b/src/settings/v2/SettingsMainV2.tsx
@@ -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} />