fix: qa issues

Issues: 
- [Optimism Handbook] Disclaimer modal unexpected behavior
[CHA-356](https://linear.app/defi-wonderland/issue/CHA-356/optimism-handbook-disclaimer-modal-unexpected-behavior)
- [Optimism Handbook] "Last update" text is too small
[CHA-355](https://linear.app/defi-wonderland/issue/CHA-355/optimism-handbook-last-update-text-is-too-small)
- [Optimism Handbook] <em> tag formatting in title results in font
inconsistency
[CHA-354](https://linear.app/defi-wonderland/issue/CHA-354/optimism-handbook-em-tag-formatting-in-title-results-in-font)
- [Wonderland Handbook] Code block misplaced
[CHA-350](https://linear.app/defi-wonderland/issue/CHA-350/wonderland-handbook-code-block-misplaced)
- [Wonderland Handbook] Titles centered instead of left-aligned
[CHA-349](https://linear.app/defi-wonderland/issue/CHA-349/wonderland-handbook-titles-centered-instead-of-left-aligned)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved the reliability of the disclaimer button’s click
functionality, ensuring it works correctly across navigation events and
dynamic page updates.

* **Style**
  * Updated menu link alignment to left-align text.
  * Added a new style for displaying the last updated timestamp.

* **Documentation**
* Improved formatting and readability in interoperability and advanced
testing documentation.
* Standardized warning blocks and enhanced emphasis formatting for
clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: 0xLeopoldo

packages/common-config/src/components/theme/Root/index.tsx

@@ -60,6 +60,161 @@ function SimpleModal({ isOpen, onClose, children }: SimpleModalProps) {
   );
 }
 
+/**
+ * Manages the disclaimer button event listener setup and cleanup
+ * This function is extracted to prevent multiple event listener attachments
+ * during Docusaurus navigation
+ */
+function createDisclaimerButtonManager(onDisclaimerClick: () => void) {
+  let isListenerAttached = false;
+  let pollInterval: NodeJS.Timeout | undefined;
+  let currentButton: HTMLElement | null = null;
+  let mutationObserver: MutationObserver | null = null;
+
+  const attachListener = () => {
+    const disclaimerBtn = document.getElementById("disclaimer-btn");
+
+    // Check if this is a different button or if we need to reattach
+    if (
+      disclaimerBtn &&
+      (disclaimerBtn !== currentButton || !isListenerAttached)
+    ) {
+      // Remove listener from old button if it exists
+      if (currentButton && isListenerAttached) {
+        currentButton.removeEventListener("click", onDisclaimerClick);
+      }
+
+      disclaimerBtn.addEventListener("click", onDisclaimerClick);
+      currentButton = disclaimerBtn;
+      isListenerAttached = true;
+
+      if (pollInterval) {
+        clearInterval(pollInterval);
+        pollInterval = undefined;
+      }
+      return true;
+    }
+    return false;
+  };
+
+  const resetAndReattach = () => {
+    isListenerAttached = false;
+    currentButton = null;
+
+    // Try to attach immediately
+    if (!attachListener()) {
+      // If button not found, start polling
+      if (!pollInterval) {
+        pollInterval = setInterval(() => {
+          attachListener();
+        }, 100);
+      }
+    }
+  };
+
+  const setup = () => {
+    if (typeof window === "undefined") return () => {};
+
+    // Try to attach immediately
+    resetAndReattach();
+
+    // Set up MutationObserver to watch for DOM changes
+    mutationObserver = new MutationObserver((mutations) => {
+      let shouldReattach = false;
+
+      mutations.forEach((mutation) => {
+        // Check if nodes were added or removed
+        if (mutation.type === "childList") {
+          // Check if our current button is still in the DOM
+          if (currentButton && !document.contains(currentButton)) {
+            shouldReattach = true;
+          }
+          // Check if a new disclaimer button was added
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const element = node as Element;
+              if (
+                element.id === "disclaimer-btn" ||
+                element.querySelector("#disclaimer-btn")
+              ) {
+                shouldReattach = true;
+              }
+            }
+          });
+        }
+      });
+
+      if (shouldReattach) {
+        resetAndReattach();
+      }
+    });
+
+    // Start observing the navbar area specifically
+    const navbar = document.querySelector(
+      "[role='banner'], .navbar, .navbar__inner"
+    );
+    if (navbar) {
+      mutationObserver.observe(navbar, {
+        childList: true,
+        subtree: true,
+      });
+    } else {
+      // Fallback to observing the entire body
+      mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    // Also listen for route change events specific to Docusaurus
+    const handleDocusaurusRouteChange = () => {
+      setTimeout(resetAndReattach, 100);
+    };
+
+    // Listen for various navigation events
+    window.addEventListener("popstate", handleDocusaurusRouteChange);
+    window.addEventListener("routeUpdate", handleDocusaurusRouteChange);
+
+    // Intercept history methods for programmatic navigation
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    history.pushState = function (...args) {
+      originalPushState.apply(history, args);
+      handleDocusaurusRouteChange();
+    };
+
+    history.replaceState = function (...args) {
+      originalReplaceState.apply(history, args);
+      handleDocusaurusRouteChange();
+    };
+
+    // Return cleanup function
+    return () => {
+      if (pollInterval) {
+        clearInterval(pollInterval);
+      }
+
+      if (currentButton && isListenerAttached) {
+        currentButton.removeEventListener("click", onDisclaimerClick);
+      }
+
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+
+      window.removeEventListener("popstate", handleDocusaurusRouteChange);
+      window.removeEventListener("routeUpdate", handleDocusaurusRouteChange);
+
+      // Restore original methods
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  };
+
+  return { setup };
+}
+
 interface RootProps {
   children: React.ReactNode;
   disclaimerContent?: React.ReactNode | string;
@@ -74,28 +229,18 @@ export default function Root({
   const [showModal, setShowModal] = useState(false);
 
   const handleCloseModal = useCallback(() => setShowModal(false), []);
+  const handleDisclaimerClick = useCallback(() => setShowModal(true), []);
 
   useEffect(() => {
     if (!showDisclaimer) return;
 
-    const handleNavbarClick = () => {
-      setShowModal(true);
-    };
-
-    // Add listener when component mounts
-    const disclaimerBtn = document.getElementById("disclaimer-btn");
-    if (disclaimerBtn) {
-      disclaimerBtn.addEventListener("click", handleNavbarClick);
-    }
+    const disclaimerManager = createDisclaimerButtonManager(
+      handleDisclaimerClick
+    );
+    const cleanup = disclaimerManager.setup();
 
-    // Cleanup listener when component unmounts
-    return () => {
-      const disclaimerBtn = document.getElementById("disclaimer-btn");
-      if (disclaimerBtn) {
-        disclaimerBtn.removeEventListener("click", handleNavbarClick);
-      }
-    };
-  }, [showDisclaimer]);
+    return cleanup;
+  }, [showDisclaimer, handleDisclaimerClick]);
 
   return (
     <>

packages/common-config/static/common/styles/global.css

@@ -739,6 +739,7 @@ a:hover {
   text-align: center;
   border-radius: 0.5rem;
   margin-right: 0.2rem;
+  text-align: start;
 }
 
 .menu__list .menu__link:hover {
@@ -1589,3 +1590,7 @@ html {
   scrollbar-width: thin;
   scrollbar-color: var(--wonderland-gray-800) var(--wonderland-blue-950);
 }
+
+.theme-last-updated {
+  font-size: 1.3rem;
+}

sites/optimism/docs/interoperability/intro-to-interop.md

@@ -3,9 +3,10 @@ id: intro-to-interop
 title: Mental model
 sidebar_label: Mental model
 ---
-This section explains the foundational mental model of OP Stack interoperability, from how messages are emitted and consumed to the validation logic that makes them safe. 
 
-When we say *interoperability*, we are talking about the ability of one chain to read and act on messages from another chain.
+This section explains the foundational mental model of OP Stack interoperability, from how messages are emitted and consumed to the validation logic that makes them safe.
+
+When we say _interoperability_, we are talking about the ability of one chain to read and act on messages from another chain.
 
 In the OP stack, interop is built into the protocol. Chains should be able to emit logs, call initiating messages, and other chains should be able to consume them as inputs to their own transactions. **This does not require routing through Ethereum L1.**
 
@@ -22,6 +23,7 @@ Native interop solves this by allowing chains to read logs from each other witho
 Interop is based on events. One chain emits an event. Another chain sees it and takes action.
 
 Each cross-chain message has two parts:
+
 - **Initiating message**: A log emitted on the source chain.
 - **Executing message**: A log emitted on the destination chain, pointing to the initiating message.
 
@@ -36,17 +38,19 @@ struct Identifier {
   uint256 chainid;
 }
 ```
+
 This identifier is used to prove that the message exists and that it has not expired.
 
 ### Validity
 
 A message can only be consumed if it is valid. There are three invariants:
+
 - **Timestamp**: The initiating message must have a timestamp less than or equal to the executing message.
 - **Chain ID**: The source chain must be in the destination chain’s dependency set.
 - **Expiry**: The message must be consumed within a fixed time window after it is created. This window is currently set to 180 days.
 
-:::info 
-If this time window elapses, the message can be re-sent on origin to make it available using `L2ToL2CrossDomainMessenger#resendMessage`. 
+:::info
+If this time window elapses, the message can be re-sent on origin to make it available using `L2ToL2CrossDomainMessenger#resendMessage`.
 :::
 
 If any of these invariants fail, the executing message is invalid. Any block that includes it will be reorged.
@@ -65,12 +69,12 @@ This configuration tells the node **which chains to watch**, **which logs to ind
 
 :::info Can I just depend on OP Mainnet?
 
-No. Each chain’s dependency set must explicitly include the chains it wants to receive messages from. Depending only on OP Mainnet does *not* automatically grant interoperability with every other OP Chain.
+No. Each chain’s dependency set must explicitly include the chains it wants to receive messages from. Depending only on OP Mainnet does _not_ automatically grant interoperability with every other OP Chain.
 
 To enable seamless interop, chains should include all intended counterparties in their dependency set. This is why Superchain clusters aim to configure **fully connected meshes**, where every chain includes all others.
 :::
 
-### Who *enforces* interop?
+### Who enforces interop?
 
 Most of the interop logic is enforced by the **consensus node software**, not by contracts.
 

sites/wonderland/docs/testing/advanced-testing/overview.md

@@ -99,22 +99,22 @@ function testOne() public {
   - Check the coverage to see if the test itself is not (silently) reverting and if the target code is actually covered
   - Make sure both sides of a revert are covered with try - assert - catch - assert.
   - Mutate the property itself or the target code. See [Mutation testing](../mutation-testing.md) for more details
-    <aside>
-    ⚠️
-    
-    Unlike what you could be used to in regular unit or integration tests, only assert with a condition equals to false will make a test revert - without the previous checks, it is therefore easy to take a passing test for granted, especially as most contracts are using require and revert (in other words, if one doesn’t pay attention, one can easily end up testing nothing). 
-    
-    ```solidity
-    function testOne() public {
-      require(false);
-    }
-    
-    function testTwo public {
-      assert(false);
-    }
-    ```
-    
-    </aside>
+
+:::warning
+
+Unlike what you could be used to in regular unit or integration tests, only assert with a condition equals to false will make a test revert - without the previous checks, it is therefore easy to take a passing test for granted, especially as most contracts are using require and revert (in other words, if one doesn't pay attention, one can easily end up testing nothing).
+
+```solidity
+function testOne() public {
+  require(false);
+}
+
+function testTwo public {
+  assert(false);
+}
+```
+
+:::
 
 - Any state which can be accessed or reconstructed from the target should be (even if some needs to be recomputed, for instance reducing individual balances to a cumulative sum). If there is no way to do so, then a ghost variable should be used (either in the relevant handler, or, usually easier, in a “BaseHandler” contract, with relevant helper functions).
 - Always start with validating the initial setup and sanity checks as “property-0”. For instance, address of the deployed contract ≠ 0, calling some constant variables, etc.