From b6a91723e723be51a06e42e9e6fd5964f3a33f39 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Jan 2026 13:01:51 +0200
Subject: [PATCH] feat(presentation): integrate buttons into collection
 properties

---
 .../collections/presentation/index.css        | 10 ---
 .../collections/presentation/index.tsx        | 62 +++++++++----------
 2 files changed, 28 insertions(+), 44 deletions(-)

diff --git a/apps/client/src/widgets/collections/presentation/index.css b/apps/client/src/widgets/collections/presentation/index.css
index ac3d628c3..7c1706af5 100644
--- a/apps/client/src/widgets/collections/presentation/index.css
+++ b/apps/client/src/widgets/collections/presentation/index.css
@@ -1,13 +1,3 @@
-.presentation-button-bar {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-
-    .floating-buttons-children {
-        top: 0;
-    }
-}
-
 .presentation-container {
     width: 100%;
     height: 100%;
diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx
index 28fd18fa0..6fb618b1f 100644
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -55,12 +55,14 @@ export default function PresentationView({ note, noteIds, media, onReady, onProg
     if (media === "screen") {
         return (
             <>
-                <CollectionProperties note={note} />
+                <CollectionProperties
+                    note={note}
+                    rightChildren={<ButtonOverlay containerRef={containerRef} api={api} />}
+                />
                 <ShadowDom
                     className="presentation-container"
                     containerRef={containerRef}
                 >{content}</ShadowDom>
-                <ButtonOverlay containerRef={containerRef} api={api} />
             </>
         );
     } else if (media === "print") {
@@ -112,41 +114,33 @@ function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivE
     }, [ api ]);
 
     return (
-        <div className="presentation-button-bar">
-            <div className="floating-buttons-children">
-                <ActionButton
-                    className="floating-button"
-                    icon="bx bx-edit"
-                    text={t("presentation_view.edit-slide")}
-                    noIconActionClass
-                    onClick={e => {
-                        const currentSlide = api?.getCurrentSlide();
-                        const noteId = getNoteIdFromSlide(currentSlide);
+        <>
+            <ActionButton
+                icon="bx bx-edit"
+                text={t("presentation_view.edit-slide")}
+                onClick={e => {
+                    const currentSlide = api?.getCurrentSlide();
+                    const noteId = getNoteIdFromSlide(currentSlide);
 
-                        if (noteId) {
-                            openInCurrentNoteContext(e, noteId);
-                        }
-                    }}
-                />
+                    if (noteId) {
+                        openInCurrentNoteContext(e, noteId);
+                    }
+                }}
+            />
 
-                <ActionButton
-                    className="floating-button"
-                    icon="bx bx-grid-horizontal"
-                    text={t("presentation_view.slide-overview")}
-                    active={isOverviewActive}
-                    noIconActionClass
-                    onClick={() => api?.toggleOverview()}
-                />
+            <ActionButton
+                icon="bx bx-grid-horizontal"
+                text={t("presentation_view.slide-overview")}
+                active={isOverviewActive}
+                onClick={() => api?.toggleOverview()}
+            />
 
-                <ActionButton
-                    className="floating-button"
-                    icon="bx bx-fullscreen"
-                    text={t("presentation_view.start-presentation")}
-                    noIconActionClass
-                    onClick={() => containerRef.current?.requestFullscreen()}
-                />
-            </div>
-        </div>
+            <ActionButton
+                icon="bx bx-fullscreen"
+                text={t("presentation_view.start-presentation")}
+                onClick={() => containerRef.current?.requestFullscreen()}
+            />
+        </>
     );
 }