move RustyWolf tabs into the window title bar

src/app/components/FeatureWindow.tsx

@@ -9,16 +9,24 @@ import type { ReactNode } from "react";
  * copy lives in the `.web-feature-text` paragraph below each window.
  */
 
-function Chrome({ title, children }: { title: string; children: ReactNode }) {
+function Chrome({
+  title,
+  tabs,
+  children,
+}: {
+  title?: string;
+  tabs?: ReactNode;
+  children: ReactNode;
+}) {
   return (
     <div className="fw" aria-hidden="true">
-      <div className="fw-bar">
+      <div className={"fw-bar" + (tabs ? " fw-bar-browser" : "")}>
         <span className="fw-dots">
           <span className="fw-dot" />
           <span className="fw-dot" />
           <span className="fw-dot" />
         </span>
-        <span className="fw-title">{title}</span>
+        {tabs ?? <span className="fw-title">{title}</span>}
       </div>
       <div className="fw-body">{children}</div>
     </div>
@@ -51,13 +59,6 @@ function BrowserBody() {
   const tiles = ["G", "Y", "R", "D", "X"];
   return (
     <div className="fw-browser">
-      <div className="fw-tabs">
-        <span className="fw-tab">
-          <span className="fw-tab-dot" />
-          New Tab
-        </span>
-        <span className="fw-tab-plus">+</span>
-      </div>
       <div className="fw-toolbar">
         <span className="fw-nav">‹</span>
         <span className="fw-nav">›</span>
@@ -96,7 +97,17 @@ export default function FeatureWindow({ variant }: { variant: "game" | "browser"
     );
   }
   return (
-    <Chrome title="RustyWolf — new tab">
+    <Chrome
+      tabs={
+        <div className="fw-tabs">
+          <span className="fw-tab">
+            <span className="fw-tab-dot" />
+            New Tab
+          </span>
+          <span className="fw-tab-plus">+</span>
+        </div>
+      }
+    >
       <BrowserBody />
     </Chrome>
   );

src/app/components/WebLayout.tsx

@@ -318,7 +318,7 @@ export default function WebLayout() {
           </Section>
 
           <footer className="web-footer glass">
-            <span className="web-footer-label">v2.2.10</span>
+            <span className="web-footer-label">v2.2.11</span>
             © 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just
             follow the GPL3.0 License)
           </footer>

src/app/web.css

@@ -457,6 +457,12 @@ html[data-theme="web"] body {
   background: var(--fw-chrome);
   border-bottom: 1px solid var(--glass-border);
 }
+/* Browser variant: the tab strip lives in the title bar (Chrome/Firefox style). */
+.fw-bar-browser {
+  gap: 8px;
+  padding: 0 8px 0 12px;
+  border-bottom: none;
+}
 .fw-dots {
   display: flex;
   gap: 6px;
@@ -649,9 +655,10 @@ html[data-theme="web"] body {
 .fw-tabs {
   display: flex;
   align-items: flex-end;
+  align-self: stretch;
   gap: 5px;
-  height: 26px;
-  padding: 5px 10px 0;
+  min-width: 0;
+  flex: 1;
 }
 .fw-tab {
   display: inline-flex;
@@ -661,7 +668,8 @@ html[data-theme="web"] body {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  padding: 3px 11px;
+  padding: 7px 12px 6px;
+  margin-bottom: -1px;
   border-radius: 8px 8px 0 0;
   border: 1px solid var(--btn-border, var(--glass-border));
   border-bottom: none;