fix: stabilize browse tabs and toasts

src/__tests__/ui-design-contract.test.ts

@@ -155,6 +155,20 @@ describe("restored UI design contract", () => {
     expect(cliBand).toContain("max-width: none");
   });
 
+  it("keeps browse segmented labels stable across active state changes", () => {
+    const css = styles();
+
+    expect(cssRule(css, ".browse-tab")).toContain("font-weight: 600");
+    expect(cssRule(css, ".browse-tab.is-active")).not.toContain("font-weight");
+  });
+
+  it("makes global toasts dismissible", () => {
+    const rootSource = rootRoute();
+
+    expect(rootSource).toContain("<Toaster");
+    expect(rootSource).toContain("closeButton");
+  });
+
   it("keeps migrated application surfaces on canonical semantic tokens", () => {
     const css = styles();
     const sharedCss = designSystemStyles();

src/routes/__root.tsx

@@ -202,6 +202,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
             <Footer />
           </div>
           <Toaster
+            closeButton
             position="bottom-right"
             toastOptions={{
               style: {

src/styles.css

@@ -18092,7 +18092,7 @@ body:has(.browse-page-borderless-header) .navbar {
   cursor: pointer;
   font: inherit;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 1;
   white-space: nowrap;
   transition:
@@ -18114,7 +18114,6 @@ body:has(.browse-page-borderless-header) .navbar {
 .browse-tab.is-active {
   border-bottom-color: var(--ink);
   color: var(--ink);
-  font-weight: 600;
 }
 
 .browse-tab-count {