diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 794d3e6e..32701e35 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -289,13 +289,9 @@ export function Header() {
             <span className="my-auto text-nowrap font-bold">Game Master</span>
             {enabledCommandModes.length > 0 && (
               <>
-                {loadingNewCommandMode ? (
-                  <FaSpinner
-                    className={`my-auto ml-2 animate-spin text-white`}
-                  />
-                ) : (
-                  <FaRedo className={`my-auto ml-2 text-gray-200`} />
-                )}
+                {loadingNewCommandMode ? <FaSpinner className={`
+                  my-auto ml-2 animate-spin text-white
+                `} /> : <FaRedo className={`my-auto ml-2 text-gray-200`} />}
               </>
             )}
           </div>
@@ -321,9 +317,9 @@ export function Header() {
             {enabledCommandModes.length > 0 && (
               <>
                 {loadingNewCommandMode ? (
-                  <FaSpinner
-                    className={`my-auto ml-2 animate-spin text-gray-200`}
-                  />
+                  <FaSpinner className={`
+                    my-auto ml-2 animate-spin text-gray-200
+                  `} />
                 ) : (
                   <FaRedo className={`my-auto ml-2 text-gray-200`} />
                 )}
@@ -352,9 +348,9 @@ export function Header() {
             {enabledCommandModes.length > 0 && (
               <>
                 {loadingNewCommandMode ? (
-                  <FaSpinner
-                    className={`my-auto ml-2 animate-spin text-gray-200`}
-                  />
+                  <FaSpinner className={`
+                    my-auto ml-2 animate-spin text-gray-200
+                  `} />
                 ) : (
                   <FaRedo className={`my-auto ml-2 text-gray-200`} />
                 )}
@@ -389,9 +385,11 @@ export function Header() {
             onClick={() => {
               audioState === AudioManagerState.RUNNING ? getApp().getAudioManager().stop() : getApp().getAudioManager().start();
             }}
-            className={audioState === AudioManagerState.ERROR ? `
-              animate-pulse !border-red-500 !text-red-500
-            ` : ""}
+            className={
+              audioState === AudioManagerState.ERROR
+                ? `animate-pulse !border-red-500 !text-red-500`
+                : ""
+            }
             tooltip={() => (
               <OlExpandingTooltip
                 title="Enable/disable audio"
@@ -463,7 +461,19 @@ export function Header() {
                 onClick={(event) => unitTypeFilterClickHandler(event, entry[0])}
                 checked={!mapHiddenTypes[entry[0]]}
                 icon={entry[1]}
-                tooltip={"Hide/show " + entry[0] + " units. Tip: holding ctrl key while clicking will hide other unit categories. To show all units again, hold ctrl while clicking a displayed unit category."}
+                tooltip={() => {
+                  return (
+                    <OlExpandingTooltip
+                      title={"Hide/show " + entry[0] + " units."}
+                      content={
+                        <>
+                          <p>Tip: holding ctrl key while clicking will hide other unit categories.</p>
+                          <p>To show all units again, hold ctrl while clicking a displayed unit category.</p>
+                        </>
+                      }
+                    />
+                  );
+                }}
               />
             );
           })}