diff --git a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
index 57edaa106..7e663087f 100644
--- a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
+++ b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
@@ -1,4 +1,3 @@
-import { CSSProperties } from "preact/compat";
 import { useTriliumOption } from "../react/hooks";
 
 /**
@@ -10,17 +9,10 @@ import { useTriliumOption } from "../react/hooks";
  * 
  * ! The toolbar is not only used in the ribbon, but also in the quick edit feature.
  */
-export default function FormattingToolbar({ hidden }: { hidden?: boolean }) {
+export default function FormattingToolbar() {
     const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
 
-    const style: CSSProperties = {};
-    if (hidden) {
-        style.display = "none";
-    }
-
     return (textNoteEditorType === "ckeditor-classic" &&
-        <div className="classic-toolbar-widget" style={style}>
-
-        </div>
+        <div className="classic-toolbar-widget" />
     )
 };
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 8c9864b44..3a937e730 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -214,28 +214,30 @@ export default function Ribbon() {
                         </div>
                     </div>
                 
-                    <div className="ribbon-body-container">
-                        <div className="ribbon-body">
-                            {filteredTabs.map(tab => {
-                                const isActive = tab.index === activeTabIndex;
-                                if (!isActive && !tab.stayInDom) {
-                                    return;
-                                }
+                    <div className="ribbon-body-container">                        
+                        {filteredTabs.map(tab => {
+                            const isActive = tab.index === activeTabIndex;
+                            if (!isActive && !tab.stayInDom) {
+                                return;
+                            }
 
-                                return tab?.content && tab.content({
-                                    note,
-                                    hidden: !isActive,
-                                    ntxId,
-                                    hoistedNoteId,
-                                    notePath,
-                                    noteContext,
-                                    componentId,
-                                    activate: useCallback(() => {
-                                        setActiveTabIndex(tab.index)
-                                    }, [setActiveTabIndex])
-                                });
-                            })}
-                        </div>
+                            return (
+                                <div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
+                                    {tab?.content && tab.content({
+                                        note,
+                                        hidden: !isActive,
+                                        ntxId,
+                                        hoistedNoteId,
+                                        notePath,
+                                        noteContext,
+                                        componentId,
+                                        activate: useCallback(() => {
+                                            setActiveTabIndex(tab.index)
+                                        }, [setActiveTabIndex])
+                                    })}
+                                </div>
+                            );
+                        })}
                     </div>
                 </>
             )}