Polish settings header and borders

Author: Edwin Chan

app/globals.css

@@ -12819,10 +12819,10 @@ html:is(.light, .dark) .settings-avatar-section,
 html:is(.light, .dark) .settings-row,
 html:is(.light, .dark) .settings-toggle-row,
 html:is(.light, .dark) .theme-choice {
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
 .settings-card {
@@ -12834,6 +12834,18 @@ html:is(.light, .dark) .theme-choice {
   padding: 0 0 1.5rem;
 }
 
+.settings-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.settings-save-header {
+  min-height: 44px;
+}
+
 .settings-tabs {
   display: inline-flex;
   align-items: stretch;
@@ -13024,6 +13036,15 @@ html:is(.light, .dark) .theme-choice {
 }
 
 @media (max-width: 720px) {
+  .settings-header-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .settings-header-actions > * {
+    flex: 1 1 auto;
+  }
+
   .settings-tabs {
     display: flex;
     width: 100%;

app/settings/page.tsx

@@ -238,7 +238,15 @@ export default function SettingsPage() {
           <p className="eyebrow">Account</p>
           <h1>Settings</h1>
         </div>
-        <PageBackLink destination="Dashboard" href="/dashboard" />
+        <div className="settings-header-actions">
+          {activeTab === "account" ? (
+            <button className="primary-action settings-save-header" onClick={handleSave} disabled={saving}>
+              {saving ? <MathCurveLoader size={16} label="Saving settings" /> : <Save size={16} />}
+              {saving ? "Saving…" : "Save"}
+            </button>
+          ) : null}
+          <PageBackLink destination="Dashboard" href="/dashboard" />
+        </div>
       </header>
 
       <div className="settings-tabs" role="tablist" aria-label="Settings sections">
@@ -536,10 +544,6 @@ export default function SettingsPage() {
             </div>
           )}
 
-          <button className="primary-action settings-save" onClick={handleSave} disabled={saving}>
-            {saving ? <MathCurveLoader size={16} label="Saving settings" /> : <Save size={16} />}
-            {saving ? "Saving…" : "Save"}
-          </button>
         </div>
       </section> : null}
     </main>