Add 'anaconda' class to document.body in Anaconda mode

KKoukiou · KKoukiou · commit ab59fd2adc25 · 2025-09-10T08:30:54.000+02:00
Modals are rendered outside the Page component, so they don’t inherit its
classes. Adding the 'anaconda' class directly to &lt;body&gt; ensures consistent
styling across the UI.
diff --git a/pkg/storaged/pages.jsx b/pkg/storaged/pages.jsx
@@ -18,7 +18,7 @@
  */
 
 import cockpit from "cockpit";
-import React, { useState, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import client from "./client";
 import { useEvent } from "hooks.js";
 
@@ -862,8 +862,17 @@ export const StorageDescription = ({ title, value, action, help, children }) =>
 export const StoragePage = ({ location, plot_state }) => {
     const page = get_page_from_location(location);
 
+    useEffect(() => {
+        // Add the 'anaconda' class to <body> when in Anaconda mode.
+        // This is needed because modals are rendered outside the Page component
+        // and won’t inherit its classes.
+        if (client.in_anaconda_mode()) {
+            document.body.classList.add("anaconda");
+        }
+    }, []);
+
     return (
-        <Page id="storage" className={"no-masthead-sidebar" + (client.in_anaconda_mode() ? " anaconda" : "")}>
+        <Page id="storage" className="no-masthead-sidebar">
             { (!client.in_anaconda_mode() && page.parent) &&
             <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                 <StorageBreadcrumb page={page} />
