Modified - Made the footer Licenses and API links open in a new browser tab and finalized the sticky User Settings header plus its top green scroll indicator.

.codex-history.md

@@ -587,3 +587,8 @@ Project Change ID[date-time] - application-version - Type - Summary:
 117 - [2026-05-07 20:49:16] - v1.27.0-dev-106-g61a9e4bd06 - Type: Modified - Preserved the `/user/settings` left-menu scroll position across settings-page navigation.
 - 1 - I modified `web_src/js/features/common-page.ts` so the sticky `/user/settings` menu saves its current `scrollTop` to `sessionStorage` while scrolling and immediately before clicking a menu link.
 - 2 - I also made the same code restore that saved scroll position after the next settings page renders, keeping the left menu at the same viewport position when navigating between items and subitems.
+
+118 - [2026-05-07 20:57:42] - v1.27.0-dev-106-g61a9e4bd06 - Type: Modified - Made the footer `Licenses` and `API` links open in a new browser tab and finalized the sticky `User Settings` header plus its top green scroll indicator.
+- 1 - I modified `templates/base/footer_content.tmpl` so both footer links now use `target="_blank"` with `rel="noreferrer"`.
+- 2 - I modified `web_src/css/modules/flexcontainer.css` so the `.header.item` at the top of the `/user/settings` sticky side menu now uses `position: sticky` inside the menu itself, with its own background and bottom separator.
+- 3 - I modified `web_src/css/modules/flexcontainer.css` so, after making the `User Settings` header sticky, the top overflow hint is rendered on the bottom edge of that header and its gradient is drawn by a dedicated `::after` element extending into the scrollable area, while the menu container keeps only the bottom hint when both are active.

.frontend.hash

@@ -1 +1 @@
-13270f82ed67c77d3d3e9662f2ca5a86c2161e25
+426064208b78a563f54a139eab51bbcb09fd407a

templates/base/footer_content.tmpl

@@ -34,8 +34,8 @@
 				{{end -}}
 			</div>
 		</div>
-		<a href="{{AssetUrlPrefix}}/licenses.txt">{{ctx.Locale.Tr "licenses"}}</a>
-		{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
+		<a target="_blank" rel="noreferrer" href="{{AssetUrlPrefix}}/licenses.txt">{{ctx.Locale.Tr "licenses"}}</a>
+		{{if .EnableSwagger}}<a target="_blank" rel="noreferrer" href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
 		{{template "custom/extra_links_footer" .}}
 	</div>
 </footer>

web_src/css/modules/flexcontainer.css

@@ -48,6 +48,14 @@ body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .u
   padding: 0.9em 1.14285714em;
 }
 
+body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu > .header.item {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--color-menu);
+  box-shadow: inset 0 -1px 0 var(--color-secondary);
+}
+
 @media (min-width: 768px) {
   body.show-persistent-navbar {
     --persistent-navbar-offset: 49px;
@@ -79,6 +87,29 @@ body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .u
   body.show-sticky-side-menus .page-content.admin .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom {
     box-shadow: inset 0 1px 0 var(--color-green), inset 0 -1px 0 var(--color-green), inset 0 16px 14px -10px var(--color-green-badge-hover-bg), inset 0 -16px 14px -10px var(--color-green-badge-hover-bg);
   }
+
+  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top {
+    box-shadow: none;
+  }
+
+  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top.has-scroll-hint-bottom {
+    box-shadow: inset 0 -1px 0 var(--color-green), inset 0 -16px 14px -10px var(--color-green-badge-hover-bg);
+  }
+
+  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item {
+    box-shadow: inset 0 -1px 0 var(--color-green);
+  }
+
+  body.show-sticky-side-menus .page-content.user.settings .flex-container-nav > .ui.vertical.menu.has-scroll-hint-top > .header.item::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -14px;
+    height: 14px;
+    pointer-events: none;
+    background: linear-gradient(to bottom, var(--color-green-badge-hover-bg), transparent);
+  }
 }
 
 @media (max-width: 767.98px) {